HyperText Mark-up Language
- HTML is not a programming language but instead it is a mark-up language – used primarily to create “viewable” documents on the web.
- The “text in funny brackets” are called HTML tags.
- Tags begin with a left-angle bracket (<) and end with a right-angle bracket (>).
- Tags are usually in pairs: the opening tag/start tag and closing tag/end tag.
- <HTML> … </HTML> - denotes the beginning and end of an HTML document
2 sections of HTML Document:
- <HEAD> … </HEAD> - contains description about the document like script code, references and style information.
- <BODY> … </BODY> - contains all the “displayable” information of the document
Notes:
· Any text found outside <HTML> tag can be interpreted by the browser
· HTML is NOT a case-sensitive language.
Other HTML Tags:
<TITLE> … </TITLE> - contains text which gives title to a document. Title to be displayed at the Title bar.
Headings – allows you to create heading titles
6 levels of headings:
<H1> … </H1>
<H2> … </H2>
<H3> … </H3>
<H4> … </H4>
<H5> … </H5>
<H6> … </H6>
Attributes – pieces of information and may be included in the beginning tag of any element.
Syntax:
<H1 align = “center|left|right”> …text… </H1>
Paragraphs
<P> … </P> - used to display as one solid block of text behaving like
a paragraph.
Syntax:
<P align = “center|justify|left|right”> …paragraph… </P>
Break
<BR> - put an unconditional line break in the middle of the document. To start a new line.
Syntax:
…regular mark-up text… <BR> …regular mark-up text…
Horizontal Rule
<HR> - inserts a horizontal line inside the document
Syntax:
…regular mark-up text…
<HR align=”center|left|right” noshade size=”{integer value}”>
…regular mark-up text…
Note:
· Size – height of the line
· Noshade – produces a filled line instead of a line with 3D shading
Division
<DIV> … </DIV> - groups sets of HTML elements belonging to one division
Syntax:
<DIV align = “center|justify|left|right”> …text… </DIV>
Blockquote – sets apart from the main body of text by having its entire left and right margins indented from the main body of text.
Syntax:
<BLOCKQUOTE> … text … </BLOCKQUOTE>
Pre-Formatted Text
- allows you to display text as it was originally entered on the keyboard.
- allows extra spaces, tabs and newline
Syntax:
<PRE> … text … </PRE>
Example:
<PRE> This is a P R E F O R M A T T E D
T
E
X
T
</PRE>
Physical Formatting Elements:
<B> … </B> - Bold
<I> … </I> - Italics
<U> … </U> - underline
<SUB> … </SUB> - Subscript
<SUP> … </SUP> - Superscript
Sample Code:
<HTML>
<TITLE>HTML Example</TITLE>
<BODY>
<H1> Heading 1 </H1>
<H2> Heading 2 </H2>
<H3> Heading 3 </H3>
<H4> Heading 4 </H4>
<H5> Heading 5 </H5>
<H6> Heading 6 </H6>
<P> This is a paragraph. </P>
<P align="center"> This is a center aligned paragraph. </P>
regular mark-up text <BR> regular mark-up text
<HR>
<DIV> This is a division. </DIV>
<BLOCKQUOTE> This is a blockquote. </BLOCKQUOTE>
<PRE> This is a P R E F O R M A T T E D
T
E
X
T
</PRE>
<B> Bold </B>
<I> Italic </I>
<U> Underline </U>
<SUB> Subscript </SUB>
<SUP> Superscript </SUP>
</BODY>
</HTML>
Sample Output:
No comments:
Post a Comment