Understanding the Web
How to create a website
Parts of an HTML page
Structure of an HTML Document
- The Outer Structure of an HTML Document
- Parents, Children, Descendants and Siblings
- Setting Up the Basic Document Structure
Creating and viewing a WEB PAGE
Text formatting in HTML
- Basic text formatting elements
- Creating Breaks
- Abbreviations, Definitions, Quotations and Citations
- Working with language elements
- Other text elements
- More formatting elements
Organising information using lists
Structure content with tables
Data collection with forms
- How a form looks like?
- Creating forms
- Input tags
- Text fields
- Password fields
- Checkboxes and radio buttons
- Hidden fields
- File upload fields
- Drop-down list fields
- Multiline text boxes
- Submit and Reset buttons
Navigation with links
Displaying images
Elements and attributes don’t exist in isolation—we use them to mark up our content in an HTML document. The simplest way to create an HTML document is to create a text file—the convention is that these files have the .html file extension. We can then load the file into a browser, either directly from the disk or via a web server. An HTML document has a particular structure—we need to have some key elements in place as a minimum.
There are two elements that provide the outer structure of an HTML document—the DOCTYPE and html elements, as shown below.
<!DOCTYPE HTML>
<html>
<!-- elements go here -->
</html>The DOCTYPE element tells the browser it is dealing with an HTML document. This is expressed through the HTML boolean attribute:
<!DOCTYPE HTML>We follow the DOCTYPE element with the start tag of the html element. This tells the browser that the contents of the element should be treated as HTML all the way through until the html close tag.
The Metadata
The metadata region of an HTML document allows us to provide information about our document to the browser. The metadata is contained inside a head element, as shown below.
<!DOCTYPE HTML>
<html>
<head>
<!-- metadata goes here -->
<title>Example</title>
</head>
</html>In the code, we have provided the minimum amount of metadata, which is the title element.
The Content
The third and final part of the document is the content, which we put inside a body element, as shown below.
<!DOCTYPE HTML>
<html>
<head>
<!-- metadata goes here -->
<title>Example</title>
</head>
<body>
<!-- content and elements go here -->
I like <code>apples</code> and oranges.
</body>
</html>The body element tells the browser which part of the document is to be displayed to the user.