HTML Guide

Overview


HTML is the language of the web page. It is not a procedural programming language, rather, it specifies layout and style of a page in a declarative style. That means that it is reasonably easy to learn.

Basic HTML


HTML can be coded with a standard text editor. It consists fo elementsof text called, tags. The following is a set of div tags. (div tags represent a rectangular section of a web page) 


<div></div>


This pair of tags consists of open tag 


<div>


and a close tag 


</div>


Each of these tags are div tags. Within HTML, you must always have an open tag with a close tag. However, you can put other tags within a pair of tags as such. 


<div>
  <div></div>
</div>


HTML tags may come with a style attribute, which gives the brownser additional information about how to render the tags. The style value is given inside the quotation marks. It is a semi-colon delimited list of styles to apply to the given tag. In this case, there are two style attributes, the height and background-color. 


<div style="height:300px;background-color:lightgreen"> 

</div>
Try it!

(sample code may come with a Try It! button which allows you to run the code and see the result. You may edit the code and re-run in order to see the effect)

Text does not require a tag, and can be written out as plain text 



  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
Try it!

Or text can be placed within tags. 


<div style="height:300px;background-color:lightgreen"> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
</div>
Try it!

Topics


  • Tags - discusses the common tags used in HTML
  • Style - gives detail about how to apply style to HTML
  • Text - using text in HTML
  • Layout - shows tag layout and how it is translated to layout in a page

Contents