-
Adding an Image to a Web Page
-
The role of images in a webpage
-
Specifying locations in web pages
-
Customizing Links
-
Exploring link options
-
Basic links
-
Why links?
-
Submit and Reset buttons
-
Multiline text boxes
-
Drop-down list fields
-
File upload fields
-
Hidden fields
-
Checkboxes and radio buttons
-
Password fields
-
Text fields
-
Input tags
-
Creating forms
-
How a form looks like?
-
Adding Headers Cells
-
Creating a Basic Table
-
Description list
-
Unordered list
-
Ordered list
-
Lists
-
More formatting elements
-
Other text elements
-
Working with language elements
-
Abbreviations, Definitions, Quotations and Citations
-
Creating Breaks
-
Basic text formatting elements
-
Creating a page from scratch using VS Code
-
Creating a page from scratch using Notepad
-
Setting Up the Basic Document Structure
-
Parents, Children, Descendants and Siblings
-
The Outer Structure of an HTML Document
-
Element Attributes
-
HTML elements
-
How HTML creates a website
-
Creating HTML markup
-
How a website works
-
Web Browsers vs Web Servers and Internet/HTTP
-
Webpage vs Website
Creating HTML markup
HTML is a straightforward language for describing web page contents. Its components are easy to use and come in three basic types:
- Elements: Identify different parts of an HTML document using tags.
- Attributes: Provide additional information about a particular instance of an element.
- Entities: Non-ASCII text characters, such as the copyright symbol (©) and accented letters (É).
Building HTML documents
Building an HTML document requires assembling a sequence of elements. Some of that sequence is prescribed, which means certain elements always appear in a specific order. Other aspects of the sequence are optional, which gives you the ability to pick and choose the elements for a particular page that are best-suited to accommodate and deliver your content. The HTML elements are as follows, in their order of appearance:
- The <html> tag starts the web page, and </html> ends it.
- The markup between <head> and </head> defines general information for the entire web page.
- The text inside the <title></title> element provides the page title.
- The <meta> element provides information about page content and display layout.
- A <link> element establishes a link to an external resource; in this case, to two different CSS style sheets.
- The markup between <body> and </body> supplies actual page content.
- The <div></div> element defines two different content divisions on the page, one for navigation, the other for page content.
- The navigation <nav></nav> element defines a navigation bar.
- The anchor <a></a> element defines hypertext links.
- The heading1 <h1></h1> element defines a level-1 heading.
- The paragraph <p></p> element defines a paragraph of text.
- A figure <figure></figure> element defines a graphic with a caption.
- The image <img> element links to a graphic for display, with horizontal and vertical dimensions and alternative text in case the image doesn’t appear.
- A figure caption <figcaption></figcaption> element labels the figure caption.
- A document footer <footer></footer> element defines text for the bottom of the page.