HTML Basics
HTMl HTML: Hypertext Markup Language The language used to develop web pages is called HTML. Web pages are also called HTML documents. HTML is specified as TAGS in an HTML document i.e Web pages.
ADVANTAGES of html Easy to use Loose syntax (although, being too flexible will not comply with standards) Supported on almost every browser Widely used; established on almost every website Free - You need not buy any software Easy to learn & code even for novice programmers
HTML TAGS Tags are instructions that are embedded directly into the text of the document. An HTML tag is a signal to a browser that it should do something other than just throw text up on the screen. All html tags begin with an open angle bracket(<) and end with a close angle bracket(>).
Type of tags in html Paired Tag: A tag (opening tag)is said to be a paired tag if it is along with a companion tag (closing tag). E.g <b> HELLO</b> Output : HELLO E.g <body>……..</body> Singular Tag: A stand alone tag which does not have a companion tag E.g Hello<br>World Output: Hello World
ATTRIBUTES of tag Some HTML tags require additional information to be supplied to them. E.g when a picture is placed on the screen, information like height and width of the picture can be specified. This additional information is known as attributes of a tag These are written immediately following the tag, separated by a space. Good to quote the attributes
CREAtion of html file The creation of the textual content of the web site is done in a simple editor such as notepad and saved as filename.html. After creating this text file, view its contents in a browser.
Structure of an html program The entire web page is enclosed within <HTML></HTML> tags. Two distinct sections are created using <HEAD></HEAD> tags and <BODY></BODY> tag. HEAD: information placed in this section is essential to the inner working of the document. Element of head tag is Title tag which Is used to print the title name of the html page on the web page.
Attributes of BODY tag: Body: this tag encloses all tags, attributes and information that one wants the browser to display Attributes of BODY tag: BGCOLOR: changes the default background color to whatever color is specified within this tag. The color value can be given in name or in equivalent hexadecimal number. BACKGROUND: specifies the name of the Gif file that will be used as the background of the document. TEXT: changes the body text color from its default value to the value specified in the attribute.
Titles and footer Title : to display what the page is about. <TITLE>…….</TITLE> Footer: information placed at the foot of the web page like “copyright information” <ADDRESS>……</ADDRESS>
example <HTML> <HEAD><TITLE>My 1st Page</TITLE></HEAD> <BODY bgcolor=pink text=0000ff background="C:\Documents and Settings\Owner\Desktop\Blue hills.jpg"> Good Morning to all <ADDRESS> Regard<BR>Abc</ADDRESS> </BODY> </HTML>
TEXT FORMATTING P: (paragraphs break) A blank line always separate paragraph in textual material. on encountering this tag the browser, moves onto a new line, skipping one line between the pervious line and a new line. E.g This world is new to all of us. <p> Lets try to explore it as much we can. Output: This world is new to all of u. Lets try to explore it as much we can.
<Pre> tag The HTML <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:
LINE BREAK: when text need to start from a new line and not continue on the same line. EMPHASING MATERIAL IN A WEB PAGE: to divide a document in headings and subheadings. There are 6 different levels starting from H1 to H6. All styles appear in BOLDFACE and size of heading depend upon its level.
EXAMPLE <HTML> <HEAD><TITLE>My 1st Page</TITLE></HEAD> <BODY bgcolor=pink text=0000ff background="C:\Documents and Settings\Owner\Desktop\Blue hills.jpg"> <H1>Good Morning to all</H1> <H2>Good Morning to all</H2> <H3>Good Morning to all</H3> <H4>Good Morning to all</H4> <H5>Good Morning to all</H5> <H6>Good Morning to all</H6> <ADDRESS> Regards <BR>Abc</ADDRESS> </BODY> </HTML>
HTML Text Formatting Elements Tag Description <b> Defines bold text <em> Defines emphasized text <i> Defines italic text <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text (Text underlined) <del> Defines deleted text <mark> Defines marked/highlighted text
Drawing lines: the HR tag draws a horizontal line. ALIGN: aligns the line on the browser screen which is by default aligned to center of the screen. ALIGN=LEFT will align the line to the left of the screen ALIGN=RIGHT will align the line to the right of the screen ALIGN=CENTER will align the line to the center of the screen SIZE: changes the size of the rule WIDTH: set the width of the rule. It can be set to a fixed number of pixels, or to a percentage of the available screen width
Physical and logical elements of a tag While a physical character tag controls how to format the text, a logical character tag describes how the text is being used, without regard to how it should be formatted
Physical tags Tag Description Renders as <b> bold displays text as bold <big> big displays text in a big font <i> italics displays text as italic <s> or <strike> strike displays text with a line through it <small> small displays text in a small font <sub> subscript displays the text as subscript — text that displays below the baseline of the text <sup> superscript displays the text as superscript — text that has baseline above the baseline of the rest of the text <u> underline underlines the text
Logical tags :Tags with semantic importance Description Renders as <cite> citation emphasizes the text in italics. <del> deleted text displays text with a line through it <dfn> definition for a word being defined. Typically displayed in italics. <em> emphasis emphasizes the text in some way usually as italic. <ins> inserted text underlined <strong> strong Text is emphasized more strongly than usually as bold. <var> program variable italics <CODE> for snippets of computer code. Displayed in a fixed-width font. (This is a sample of code.) <KBD> for user keyboard entry hould be displayed in a bold fixed-width font, but many browsers render it in the plain fixed-width font. (Enter password for Windows networking.)
BOLD: displays the text in BOLDFACE TEXT STYLES BOLD: displays the text in BOLDFACE <B>………..</B> ITALICS: displays the text in ITALICS <I>……………………..</I> UNDERLINE: displays the text underlined <U>……………….</U> CENTER: center tag is used to center everything found between them- text,lists,images,rules,tables, or any other document <center>…………………</center>
example <HTML> <HEAD><TITLE>My 1st Page</TITLE></HEAD> <BODY bgcolor=pink text=0000ff> <B>HI ALL</B><br> <I>HI ALL</I><br> <U>HI ALL</U><br> <HR> <HR align=left size=5 width=640 color=red> <HR align=right size=5 width=640 color=blue> <HR size=5 width=640 color= green> </BODY> </HTML>
FONT FONT: all text specified within the tags < FONT> and </FONT>will appear in the fort, size and color as specified as attributes of the tag <FONT> ATTRIBUTES: FACE: set the font to the specified font name. SIZE: sets the size of the text. Values from 1-7. default size is 3 COLOR: set the color of the text
<HTML> <HEAD><TITLE>My 1st Page</TITLE></HEAD> <BODY> <FONT face="Times New Roman" size=7> Good Morning to all </FONT><Br> <FONT face="Courier New" size=6> Good Morning to all </FONT><br> <FONT face="Courier New" size=5 color=red> Good Morning to all </FONT><br> <FONT face="Times New Roman" size=4 color=0000ff> Good Morning to all </FONT><Br> </BODY> </HTML>
<style> tag Every HTML element has a default style (background color is white and text color is black). Changing the default style of an HTML element, can be done with the style attribute. This example changes the default background color from white to lightgrey:
The HTML style attribute has the following syntax: style="property:value"
example <body style="background-color:lightgrey"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>
HTML Text Color The color property defines the text color to be used for an HTML element: Example <h1 style="color:blue">This is a heading</h1> <p style="color:red">This is a paragraph.</p>
HTML Fonts The font-family property defines the font to be used for an HTML element: Example <h1 style="font-family:verdana">This is a heading</h1> <p style="font-family:courier">This is a paragraph.</p>
HTML Text Size The font-size property defines the text size to be used for an HTML element: Example <h1 style="font-size:300%">This is a heading</h1> <p style="font-size:160%">This is a paragraph.</p>
HTML Text Alignment The text-align property defines the horizontal text alignment for an HTML element: Example <h1 style="text-align:center">Centered Heading</h1> <p>This is a paragraph.</p>
Use the style attribute for styling HTML elements Use background-color for background color Use color for text colors Use font-family for text fonts Use font-size for text sizes Use text-align for text alignment