02. Fundamentals of HTML

Working with Root and Metadata Elements


  1. <!DOCTYPE HTML>
  2. <HTML>
  3. <HEAD>
  4. <style type="text/css">
  5. body {color:green}
  6. </style>

  8. <META name="cars" contents="some of the great cars.">
  9. <TITLE>
  10. Great cars.
  11. </TITLE>
  12. <BASE href="http://www.w3.org/TR/html5/semantics.html#semantics" target="parent"/>

  14. </HEAD>
  15. <BODY>
  16. <H1>Great Cars</H1>
  17. <P>This content is related to the greats cars in the world.</P>
  18. <A href="semantics.html#the-base-element" >BASE element</A>-
  19. <A href="semantics.html#semantics" >HTML5</A>
  20. </BODY>
  21. </HTML>


In the head element, we have used the style element to define the style sheet proparties of the document.
In the meta element, we have specified the description of the document
In the title element, we have specified the title of the document
In the body element, we have specified the h1 element to display heading , the p element to display the paragraph,
and the A element to display the links on the document.

Working with Script and noscript elements


  1. <!DOCTYPE HTML>
  2. <HTML>
  3. <HEAD>
  4. <SCRIPT type="text/javascript">
  5. document.write("Have a good day.")
  6. </SCRIPT>
  7. </HEAD>
  8. <BODY>
  9. <NOSCRIPT>
  10. JavaScript is disabled or not supported on your browser.
  11. </NOSCRIPT>
  12. </BODY>
  13. </HTML>

The Script element is used in the HTML document for using  the javascript in the document.
javascript allows you to enhance the functionality of the document
noscript element is used to display the alternet text on the browser that does not support scripts.

working with section element


  1. <!DOCTYPE HTML>
  2. <HTML>
  3. <HEAD>
  4. <TITLE>Working with Section Elements</TITLE>
  5. </HEAD>
  6. <BODY>
  7. <SECTION>
  8. <H1>HTML5</H1>
  9. <P>Example of the SECTION element.</P>
  10. </SECTION>

  12. <NAV>
  13. <H1>Navigation</H1>
  14. <UL>
  15. <LI><A href="articles.html">Articles</A></LI>
  16. <LI><A href="today.html">Today’s to do list</A></LI>
  17. </UL>
  18. </NAV>
  19. </BODY>
  20. </HTML>

the section elements are used to define different sections of the HTML document, such as article section, header, and footer.


  1. <!DOCTYPE HTML>
  2. <HTML>
  3. <HEAD>
  4. <TITLE>Article page</TITLE>
  5. </HEAD>
  6. <BODY>
  7. <H1>This is an Article Page</H1>
  8. </BODY>
  9. </HTML>

Working with Article and Aside elements


  1. <!DOCTYPE HTML>
  2. <HTML>
  3. <HEAD>
  4. <TITLE>Working with Section Elements</TITLE>
  5. </HEAD>
  6. <BODY>
  7. <ASIDE style="float:right;width:200px;">
  8. <P> You can also learn about the Section elements by navigating to this <A href="http://www.w3.org/TR/html5/sections.html#sections">LINK</A>.
  9. </ASIDE>
  10. <ARTICLE>
  11. <HEADER>
  12.   <H1>Title of the Article </H1>
  13. <A href="http://www.w3.org/TR/html5/sections.html#sections"> Section Elements</A>
  14. </HEADER>
  15. <P>This content is defined in the ARTICLE element.</P>
  16. </ARTICLE>
  17. </BODY>
  18. </HTML>

Working with Address element


  1. <!DOCTYPE HTML>
  2. <HTML>
  3. <HEAD>
  4. <TITLE>Working with Section Elements</TITLE>
  5. </HEAD>
  6. <BODY>
  7. <ASIDE style="float:right;width:200px;">
  8. <P> You can also learn about the Section elements by navigating to this <A href="http://www.w3.org/TR/html5/sections.html#sections">LINK</A>.
  9. </ASIDE>
  10. <ARTICLE>
  11. <HEADER>
  12.   <H1>Title of the Article </H1>
  13. <A href="http://www.w3.org/TR/html5/sections.html#sections"> Section Elements</A>
  14. </HEADER>
  15. <P>This content is defined in the ARTICLE element.</P>
  16. </ARTICLE>

  19. <ADDRESS>
  20. <P>This articel is written by:</P>
  21. <A href="../Anderson/"> Mathew Anderson</A> and
  22. <A href="../Dave/">Matt Dave</A>
  23. </ADDRESS>
  24. </BODY>
  25. </HTML>

Working with Header and Footer elements

the header element is used to define the heading section of the HTML document;
the Footer element is used to define the footer of the document.
you can use other html elements like h1, a, nav, ul in the header and footer elements to provide the header and footer of html document.

<!DOCTYPE HTML>
<HTML>
<BODY>
<HEADER>
<H1>Heading </H1>
<A href=" http://www.w3.org/TR/html5/sections.html#sections"> Section Elements</A></DD>
<NAV>
  <UL>
  <LI><A href="/articles">Articles</A>
  <LI><A href="/discussions">Discussions</A>
<LI><A href="/download">Download</A>
  </UL>
</NAV>
</HEADER>

The body content of the HTML document

<FOOTER>
<NAV>
<P><A href="/credits.html">Credits</A> —
<A href="/terms.html">Terms of Service</A>
</NAV>
<P>Copyright © 2010</P>
</FOOTER>
</BODY>

</HTML>

Working with Headings

<html>
<head>
<title>heading</title>
</head>
<body>
<h3>The Earth</h3>
Earth is one of the 9 planets of Solar system....<br/>
.............<br/>
.............<br/>
.............<br/>
</body>
</html>

there are six levels of heading elements that range from h1 to h6
h1- most important heading / the largest font size of the heading
h6 - least importent heading / the smallest font size of the heading
h4 - normal plain text

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>heading2</TITLE>
</HEAD>
<BODY>
<H1>heading 1</H1>
<H2>heading 2</H2>
<H3>heading 3</H3>
There are some alpha-numeric characters, such as ‘<’, and ‘>’, and ‘&’ that are used in HTML syntax formation. They are referred to as special characters. 
<HGROUP>
<H4>heading 4</H4>
<H5>heading 5</H5>
<H6>heading 6</H6>
</HGROUP>
</BODY>
</HTML>

working with character entities

character entities are those reserved characters that are replaced with the special characters 

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>charentity</TITLE>
</HEAD>
<BODY>
The &lt; and &gt; are used to create an HTML element.
</BODY>
</HTML>

working with horizontal rules

horizontal lines are used in the html page to divide the page
horizontal rules are also used as a separator between the content of an html page.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>hrule2</TITLE>
</HEAD>
<BODY>
The first line.<HR/>
The second line.<HR size="10" style="background-color:blue;"/>
The third line
</BODY>
</HTML>

working with line breaks

line breaks are required in a situation where you want to continue your text from the next line.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>lbreak</TITLE>
</HEAD>
<BODY>
<H1>Address without line break.</H1>
Prof. Patel
flat no. 28,
South Delhi,
Delhi-110026,
India

<HR/>

<H1>Address with line break.</H1><BR/>
Prof. Patel<BR/>
flat no. 28,<BR/>
South Delhi,<Br>
Delhi-110026, <BR/>
India<BR/> 
</BODY>
</HTML>

working with paragraph

content of html page as paragraph

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Paragraph</TITLE>
</HEAD>
<BODY>
There are some alpha-numeric characters such as ‘&lt;’, and ‘&gt;’, and ‘&amp;’ that are used in HTML syntax formation. They are referred to as special characters. In other words, HTML has reserved certain characters for its own use.

Using these characters in their original form in a HTML document confuses the browser. These characters are not used in their original form but in its coded form.

<HR/>
<HR/>

<P> There are some alpha-numeric characters such as ‘&lt;’, and ‘&gt;’, and ‘&amp;’ that are used in HTML syntax formation. They are referred to as special characters. In other words, HTML has reserved certain characters for its own use.</P> <P> Using these characters in their original form in a HTML document confuses the browser. These characters are not used in their original form but in its coded form.</P>
</BODY>
</HTML>

working with citations, quotation, definitions
citations
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>citation</TITLE>
</HEAD>
<BODY> 
<P>There are some alpha-numeric characters such as ‘&lt;’, and ‘&gt;’, and ‘&amp;’ that are used in <CITE>HTML syntax formation</CITE>. They are referred to as <CITE>special characters</CITE>.</P>
</BODY>
</HTML>
quotation
<!DOCTYPE HTML>
<HTML>
<BODY>
<P>There are some alpha-numeric characters such as ‘&lt;’, and ‘&gt;’, and ‘&amp;’ that are used in <Q>HTML syntax formation</Q>. They are referred to as <Q>special characters</Q>.</P>
</BODY>
</HTML>
definitions
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>definition</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Planet</DT>
<DD>Celestial body that revolves around the star</DD>
<DT>Satellite</DT>
<DD>Celestial body that revolves around the planet</DD>
<DT>Star</DT>
<DD>A celestial body that has its own heat and light</DD>
</DL>
</BODY>
</HTML>

working with comments

Comments are used as additional information in the code, which is not considered as a part of code.
they are ignored by the compiler and are not executed with the code

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>comment</TITLE>
</HEAD>
<BODY>
<!-- This is a Comment Tag -->
<!-- This is the source code for definition tag -->
<DL>
<DT>Planet</DT>
<DD>Celestial body that revolves around the star</DD>
<DT>Satellite</DT>
<DD>Celestial body that revolves around the planet</DD>
<DT>Star</DT>
<DD>A celestial body that has its own heat and light</DD>
</DL>
</BODY>
</HTML>



No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

My Favorite Books

  • C and Data Structures by Ashok N. kamthane
  • Web Technologies by A. A. Puntambekar
  • Learn HTML and CSS with W3Schools
  • Learn JavaScript and Ajax with W3Schools
  • HTML5 Black Book: Covers Css3, Javascript,XML, XHTML, Ajax, PHP And Jquery
  • HTML5 Application Development Fundamentals: MTA Exam 98-375
  • .NET 4.0 Programming 6-In-1, Black Book
  • SQL Server 2008 R2 Black Book
  • Asp.net 4.0 Projects Covers: net 3.5 And .net 4.0 Codes, Black Book
  • UNIX Shell Programming 1 Edition by Yashavant Kanetkar
  • UNIX and Shell Programming 1 Edition by Richard F. Gilberg, Behrouz A. Forouzan
  • Computer Networks by Andrew S. Tanenbaum
  • Multiple Choice questions in computer science by Timothy J Williams