Coding Manuals - Your Online Coding Tutor

Time 2020-07-01 10:02:56

Web Name: Coding Manuals - Your Online Coding Tutor

WebSite: http://www.codingmanuals.com

ID:15841

Keywords:

Manuals,Coding,Your,

Description:

Colors can be applied to a Webpage using style attribute with color name as hexadecimal value of the color.ForegroundIn this we can apply color to the text.This can be done using >Example: html head title webpage using color /title /head body h1 >BackgroundIn this we can apply Background color to the text.This can be done using >Example: html head title webpage using color /title /head body h1 >Border ColorTo add a color border surrounding text.This can be done using >Example: html head title webpage using color /title /head body h1 >Common example: html head title webpage using color /title /head body h1 >Output:posted in HTML Tutorials | Comments Off on HTML ColorWhat are List Tags?Ordered list tagList items are displayed using bullets.Unordered list tagList items are displayed using numbers.Example: html head title my first web page /title /head body h1 list of HTML tags /h1 li Header tag /li li bold tag /li li Italics tag /li li underline tag /li !-- this is an example of ordered list tag-- /ol hr / h1 list of HTML tags /h1 li Header tag /li li bold tag /li li Italic tag /li li underline tag /li !-- this is an example of unordered list tag -- /ul /body /html Output:Definition List Definition list is a series of term and definition pair.Example: html head title html code using list tag /title /head body dt strong EMPTY HTML ELEMENTS /strong dd HTML elements with no content are called as empty elements. br Empty elements doesnot have a closing tag. br ExampleBreak line tag doesnot have a closing tag. /dl /body /html Using image as bullets:Example: html head title my HTML webpage /title /head body ul >Output:Example showing different types of bullets:disc bullet:Example: html head title my HTML webpage /title /head body ul >Output:o Image codeo Frame codeo Form codelower roman bullet:Example: html head title my HTML webpage /title /head body ul >Output:i Image codeii Frame codeiii Form codeUsing the above code we can use different types of bullets. we just need to replace wanted bullet style as follows: ul >Few of the bullet styles are disc,circle,square,decimal,decimal-leading-zero,lower-roman,upper-roman,lower-greek,lower-alpha,lower-latin,upper-aplha,upper-latin,hebrew,armenian,cjk-ideographic,hiragana-iroha which are supported by google chrome.decimal-leading-zero,lower-greek,lower-latin,hebrew,armenian,cjk-ideographic are not supported by internet explorer.posted in HTML Tutorials | Comments Off on What are List Tags?Formatting TagsFormatting Text:Text can be formatted using different styles, size, and color etc.Text style:Bold tag b /b : it is used to display the text in bold letters.Example: html head title my first web page /title /head body b html is hyper text markup language /b /body /html Output: hyper text markup languageItalic tag i /i : it is used to display the text in italic letters.Example: html head title my first web page /title /head body b i html is hyper text markup language /i /b /body /html Output: hyper text markup languageUnderline tag u /u : it is used to underline the text.Example: html head title my first web page /title /head body u html is hyper text markup language /u /body /html Output: hyper text markup languageNested tags:Example: html head title my first web page /title /head body b i html is hyper text markup language /i /b /body /html in the above example we have a line of code b i html is hyper text markup language /i /b in this we have nested italic tag with bold tag, such type of grouping is known as nested tags.care should be taken that tags should not overlap each other i.e. the inner tag should be closed before outer tag is closed. tt /tt Sometimes we need a font with the same width for all the alphabet, to instruct the browser to use a fixed width font with a text we use tt /tt .e.g.:width of alphabet w is more than alphabet i using tt /tt we can have the same width of i as equal to that of w. s This tag is used to strike a given line through the text.output:this tag is used to strike a given line through the text. big This tag is used to display the text in large font.output: hyper text markup language. small This tag is used to display the text in small font.output: hyper text markup language. sub This tag is used to subscript the textExample: html head title chemical lab /title /head body chemical formula for water is br  H sub 2 /sub O /body /html Output: chemical formula for waterH2O. sup This tag is used to superscript the text.Example: html head title birthday reminder /title /head body today is 30 sup th /sup of april , its neha’s birthday. /body /html Output:today is 30thapril , its neha’s birthday.a sample code using all formatting tags. html head title sample /title /head body b HTML is Hyper Text Markup Language /b br !-- this is an example of bold tag-- hr/ b i HTML is Hyper Text Markup Language /i /b br !-- this is an example of italic tag-- hr/ u HTML is Hyper Text Markup Language /u br !-- this is an example of underline tag-- hr/ p Chemical Formula for Water is H sub 2 /sub O br !-- this is an example of subscript tag -- hr/ Today is 30 sup th /sup of April , its Neha’s Birthday. br hr/ This is an example of s Strike tag /s br !-- this is an example of strike tag-- hr/ this is an example of small b small tag /b /small br !-- this is an example of small tag-- hr/ this is an example of big b big tag /b /big br !-- this is an example of big tag-- hr/ /body /html Outputposted in HTML Tutorials | 1 CommentMarquee MARQUEE :This tag is used to display text in a scrolling way on Webpage. You must have seen many sites using this moving text, it does grab some attention of the user.The attributes of this tag are Direction, Behavior and Loop.1) Direction: It Specifies whether the Text scrolls from right to left or left to right.2) Behavior: Behavior has 3 values scroll, alternate and slide. Scroll causes moving of text from left to right or vice versa. Alternate causes text to bounce back and forth between the marginsMarquee slides through the webpage because of slide value. The default value is scroll.3) Loop: it Tells the number of times marquee should scroll.Example:Below are few examples of marquee tag just copy in editor and save as .html to view the effectsExample : Example using Behavior : Alternate html head title My web page using marquee /title /head body font size= 6 face= Times New Roman color=blue marquee width=100%behavior=alternatebgcolor=pink This is an example of a marquee using alternate as behavior... /marquee /font /body /html Example using Behavior :Slide html head title My web page using marquee /title /head body font size= 5 face= courier color=pink marquee width=100%behavior=slidebgcolor=blue This is an example of a marquee using slide as behavior... /marquee /font /body /html Example using Behavior :scroll html head title My web page using marquee /title /head body font size= 5 face= courier color=pink marquee width=100%behavior=scrollbgcolor=blueloop=3 This is an example of a marquee using scroll as behavior... /marquee /font /body /html The difference between slide, scroll and alternate is , in scroll the text continuously scrolls from one end to another in the same direction but in slide text starts scrolling from one end and stops at other end and in alternate scrolls back and forth.Example using Direction: html head title My web page using marquee /title /head body font size= 5 face= courier color=white marquee width=100%behavior=scrolldirection=rightbgcolor=red This is an example of a marquee using direction from left to right... /marquee /font /body /html Example:To scroll the text in upwards direction html head title marquee /title /head body marquee behavior= scroll direction= up This is an example of marquee scrolling upwards /marquee /body /html Example:To scroll the text in downwards direction html head title marquee /title /head body marquee behavior= scroll direction= down This is an example of marquee scrolling downwards /marquee /body /html Example: To scroll text in different speeds. html head title marquee /title /head body marquee behavior= scroll direction= left scrollamount= 1 scroll text in slow speed /marquee marquee behavior= scroll direction= left scrollamount= 8 scroll text in medium speed /marquee marquee behavior= scroll direction= left scrollamount= 18 scroll text in fast speed /marquee /body /html Example:To Scroll images html head title marquee /title /head body marquee behavior= scroll direction= left scrollamount = 3 img src= D:\My Documents\learn3.gif alt= smile / /marquee /body /html in the above code write the location of the imagei.e img src= loaction of your image Example:To scroll image and text together. html head title marquee /title /head body marquee behavior= scroll direction= left scrollamount= 3 img src= D:\My Documents\learn3.gif alt= smile / p This is marquee using scrolling text and image /p /marquee /body /html in the above code write the location of the imagei.e img src= loaction of your image Using scroll delayHere scroll delay is the time that a marquee should wait before the next jump.Example: html head title my HTML webpage /title /head body marquee behavior= scroll direction= left scrollamount= 80 scrolldelay= 500 Your text goes here /marquee /body /html posted in HTML Tutorials | Comments Off on Marquee TagBasic Tags of HTMLHere you can learn about the tags which are commonly used.Paragraph p : Paragraph Tag is used to begin a new paragraph i.e. it tells the browser to insert a empty line and then begin with a new line.A simple example html head title My first web page /title /head body p HTML is Hyper Text Markup Language /p p HTML is Easy /p /body /html Output:Line Break br : Line Break Tag as name indicates it is used to tell the browser that the line has ended. BR is an Example of single tags in HTML (Tags which do not have ending tags)Horizontal Rule hr : Horizontal Rule Tag will give you a thin black line across the page.It has few basic elements.1) Size: it sets length of the horizontal rule in pixels or in % of page width.2) Align : it aligns the horizontal rule to left, right, and center.3) Width: It specifies the width of the horizontal rule.Sample Program: html head title Program /title /head body p Statement br can br be br broken br using line break tag hr align =left size= 2 width= 50% p Web Page can be divided using horizontal rule tag /body /html output: Heading :There is tag for various headings in HTML known as Heading tag ranging from h1 to h6 where h1 is for most important and h6 is for least important.Example: html head title Heading Example /title /head body h1 Heading tag /h1 h2 Heading tag /h2 h3 Heading tag /h3 h4 Heading tag /h4 h5 Heading tag /h5 h6 Heading tag /h6 /body /html Output: Hyperlinks Hyperlinks commonly used as links are used to toggle between the Web Pages.To create a hyperlink, href attribute is used and the url is given as input to the attribute.Example: html head title My web page using hyperlink /title /head body a href= https://www.codingmanuals.com/html-tutorials/formatting-tags/ Learn Formatting /a /body /html HTML ImagesTo embed or add an image to the webpage we use tagExample: html head title My web page using image /title /head body img scr= https://www.codingmanuals.com/wp-content/uploads/2010/08/wp.jpg alt= inspiring quote / /body /html HTML CommentsComments gives a brief description of code which makes it easier to understand.Comments are never displayed on browser, those are only for user s understanding.Comments are written as:Example: html head title comment example /title /head body p This is how a comment can be written !--this is an example of comment -- /body /html posted in HTML Tutorials | Comments Off on Basic Tags of HTMLCreating a WebpageFor creating a webpage all you need is a Editor and BrowserSteps for creating a Webpage1. Open a text editor E.g. Notepad.2. Write the proper HTML code.(See basics here). For more tags click here3. Save the HTML code in a file having extension .htmlNotepad by default will add a “.txt” extension to every file it saves. To make sure it will save your file with an “.html” extension you need to change “Save as type” setting in “Save file” window to “All files” and type name.html when you put name to your file.4. Double click on the file and it will open in the browser( Internet explorer, Firefox, Opera, Chrome or any other you have in your computer or laptop.posted in HTML Tutorials | Comments Off on Creating a WebpageBasic Structure of HTMLDocument Type HTML /HTML Title TITLE /TITLE Header HEAD /HEAD Body BODY /BODY • HTML document begins and ends with HTML tag i.e. HTML /HTML Here HTML indicates the browser that it is a HTML document and /HTML tells the browser that HTML document is completed.• Header Tag i.e. HEAD /HEAD Header Tag does not contain any text, it only contains the Title Tag in it.• Title tag i.e. TITLE /TITLE Anything written between this tag is not displayed on the screen but it is used to identify the Webpage.• Body tag i.e. BODY /BODY This is the main part of HTML document. The content which is to be displayed on screen as webpage should be written here. Body Tag contains the text as well as various tags but only the text will be displayed on Webpage.A simple example html head title My First WEB PAGE /title body HTML is Hyper Text Markup Language /body /html posted in HTML Tutorials | 3 Comments• HTML stands for Hyper Text Markup Language.• HTML is used to create World Wide Web documents which are popularly known as WebPages.• HTML is basically the code that instructs the browser how a webpage should look like.• The World Wide Web Consortium (W3C) is the standard community which develop protocols to ensure long term growth of web. Various version of HTML is developed by World Wide Web Consortium (W3C).• HTML document is a plain text which does not contain any image, sounds or graphics rather it contains links to those files.• HTML uses various tags to create WebPages.posted in HTML Tutorials | Comments Off on What is HTML?

TAGS:Manuals Coding Your 

<<< Thank you for your visit >>>

A website developed to help young coders sharpen the skills and learn various computer languages.

Hot Websites