HTML stands for Hypertext Markup Language. It is a markup language used for creating and structuring content on the web.
HTML uses a series of tags to define the structure and format of content, including text, images, links, and multimedia. These tags are read by web browsers, which render the content on the user’s screen.
Requirements…
- An Absolute Beginner
- We will learn HTML only
- CSS is not a prerequisite, though we may use it at some point…
- A computer with an internet connection.
- A text editor or integrated development environment (IDE) for writing code. Text editor: (vs code, sublime text, notepad++, atom.io)
- A web browser for previewing and testing your HTML pages. (google browser, mozilla firefox, edge, safari etc)
- Optional: a web server for hosting your HTML pages online.
Step 1: Installing the Text Editor
1. Go to the official website of Visual Studio Code at https://code.visualstudio.com/
2. Click on the “Download for Windows” button if you are using a Windows computer, or the “Download for Mac” button if you are using a Mac computer.
3. Once the download is complete, run the installer and follow the prompts to complete the installation process.
4. Launch VS Code by clicking on the icon that was created on your desktop or in your Applications folder.
5. VS Code is now ready to use. You can start writing code by opening a new file, or by creating a new project.
Step 2: How Create An HTML File
1. Open the text editor VS Code or the one you are using.
2. Type “<html>” to start the HTML document.
3. Type “<head>” to define the document’s header.
4. Type “<body>” to define the document’s body.
5. Save the file with .html extension e.g index.html which defines the root or the home page.
Example:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<main>
<h2>Main Content</h2>
<p>This is the main content of the page.</p>
</main>
<footer>
<p>Footer</p>
</footer>
</body>
</html>Step 3: 5 HTML tags with their syntax
<h1> to <h6> tags are used to define headings. Syntax: <h1>Heading 1</h1>. Example: <h1>Welcome to My Website</h1>.
<p> tag is used to define paragraphs. Syntax: <p>Paragraph text here</p>. Example: <p>This is an example of a paragraph.</p>.
<a> tag is used to create hyperlinks. Syntax: <a href=”url”>Link text here</a>. Example: <a href=”https://www.example.com”>Visit Example.com</a>.
<img> tag is used to insert images. Syntax: <img src=”image URL” alt=”image description”>. Example: <img src=”image.jpg” alt=”A beautiful sunset”>
<ul> and <li> tags are used to create unordered lists. Syntax:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>Example:
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>We also have the <br/> which is self-closing and <br>. You can use the below commands to view your source code…
Type lorem and hit enter in (vs code) to generate some dummy text to work with.
Ctrl + U to see the actual code.
fn + f12 to view the Developer tools.
Step 4: Structure of Basic HTML Page
The <!DOCTYPE html> declaration defines the document type and should be the first line of your HTML document.
The <html> element is the root element of an HTML page and contains all other elements.
The <head> element contains meta information about the document, such as the title of the page, links to stylesheets, and scripts.
The <body> element contains the visible content of the page, such as headings, paragraphs, images, and links.
The <footer> element defines a footer for the document or section, which can contain copyright information, contact details, or other relevant information.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
<img src="image.png" alt="Image">
<a href="https://www.example.com">Link</a>
<footer>
<p>Copyright © 2023 Example Company</p>
</footer>
</body>
</html>What are Doctypes…
Doctype stands for “Document Type Declaration”. It specifies the version of HTML or XML used in a web document. It is an instruction to the web browser about what version of markup language the page is written in.
For example, <!DOCTYPE HTML> is used for HTML5, while <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> is used for HTML 4.01 strict. Other examples of doctypes include XHTML 1.0 transitional and XML.
Step 5: Inline and Block Level Elements
Inline elements are those that only occupy the space required by the content they contain. They do not start on a new line and typically appear within a larger block-level element. Examples of inline elements include <a>, <strong>, <em>, and <span>.
Block-level elements, on the other hand, start on a new line and occupy the entire width of the parent element. They can contain both inline and other block-level elements. Examples of block-level elements include <div>, <h1>-<h6>, <p>, <ul>, and <li>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Block vs Inline Example</title>
</head>
<body>
<h1>This is a block-level element</h1>
<p>This is some text inside a block-level element. Block-level elements always start on a new line and take up the full width of the parent container.</p>
<span>This is an inline element</span>
<p>This is some more text inside a block-level element, but this time we've included an inline element (<span>), which does not start on a new line and only takes up the necessary width to display its content.</p>
</body>
</html>Step 6: Tag attributes
Tag attributes provide additional information about HTML elements and are always specified in the start tag. The syntax for tag attributes is “attribute_name=attribute_value”, where the attribute name is the name of the attribute, and the attribute value is the value assigned to the attribute.
For example, the <img> tag may have an “alt” attribute to specify alternate text for an image. The syntax for this attribute would be “alt=’alternative text'”.
In the <a> tag, the “href” attribute is used to specify the URL of the page the link goes to. The syntax for this attribute would be “href=’http://example.com'”.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Attributes</title>
</head>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p>The following image is inserted using the 'alt' attribute:</p>
<img src="example.jpg" alt="Example Image">
</body>
</html>In the above example, we have used the style attribute to change the color of the h1 heading to blue. We have also used the alt attribute in the img tag to provide alternative text for the image, which will be displayed if the image fails to load.
Step 7: HTML5 semantic tags
HTML5 semantic tags are specific tags used to provide meaning and structure to web page content, which improves accessibility and SEO.
Here are eight of the most commonly used HTML5 semantic tags:
<header> – Defines a header section for the document or a section.
<nav> – Defines a set of navigation links.
<article> – Defines an independent, self-contained content of a document, such as a blog post.
<section> – Defines a generic section of the document, such as chapters, headers, footers.
<aside> – Defines content that is related to the content around it, but not necessarily part of it, such as sidebars.
<footer> – Defines a footer section for the document or a section.
<main> – Defines the main content of the document.
<figure> – Defines self-contained content, such as images or diagrams, and optionally their captions.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example using HTML5 semantic tags</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Article Title</h2>
<p>Written by John Doe on March 1, 2023</p>
</header>
<p>This is the first paragraph of the article.</p>
<p>This is the second paragraph of the article.</p>
<footer>
<p>Copyright © 2023 My Website</p>
</footer>
</article>
</main>
<footer>
<p>My Website - All rights reserved</p>
</footer>
</body>
</html>Step 8: Tables
In HTML, tables are created using the <table> tag and its related tags such as <tr> for table rows, <th> for table headers, and <td> for table cells.
Here is an example of creating a simple table with two rows and two columns:
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</td>
<td>$10</td>
</tr>
<tr>
<td>Item 2</td>
<td>$15</td>
</tr>
</table>An example with a tbody element:
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>$10</td>
</tr>
<tr>
<td>Item 2</td>
<td>$15</td>
</tr>
</tbody>
</table>The thead element is used to define the table header and the tbody element is used to group the table data.
Step 9: Forms
You can create forms in the following way start with a form tag…
Example:
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="Submit">
</form>This form includes several input fields, such as a text field for the user’s name, an email field for their email address, and a text area for their message.
The action attribute specifies where the form data should be submitted, while the method attribute specifies the HTTP method to be used (in this case, POST).
The required attribute on the name and email fields ensures that the user must enter information in these fields before submitting the form. Finally, the submit input type creates a button that the user can click to submit the form.
Step 10: Quotations, Cite
In HTML, there are two types of quotations:
1. Double quotes (“)
2. Single quotes (‘)
The <blockquote> tag is used to specify a long quotation that is indented and set off from the main text.
The <q> tag is used to specify a short inline quotation that is enclosed within quotation marks.
Example:
<blockquote>
<p>Life is 10% what happens to us and 90% how we react to it.</p>
<cite>- Charles R. Swindoll</cite>
</blockquote>
<p>The famous quote by <q>Mahatma Gandhi</q>: "Be the change you wish to see in the world."</p>Output:
Life is 10% what happens to us and 90% how we react to it.
- Charles R. Swindoll
The famous quote by "Mahatma Gandhi": "Be the change you wish to see in the world."Step 11: Abbreviation
The <abbr> tag in HTML is used to define an abbreviation or acronym. The attribute ‘title’ is used to specify the full form of the abbreviation or acronym.
Here is an example:
<p>HTML is a <abbr title="Hypertext Markup Language">markup language</abbr> used to create web pages.</p>In this example, “HTML” is the abbreviation and “Hypertext Markup Language” is the full form, which is specified using the ‘title’ attribute. When the user hovers over the abbreviation, the full form will be displayed as a tooltip.
Step 12: Meta tags
Meta tags are snippets of code that provide metadata about a webpage. They are added to the HTML code of a webpage and are not displayed on the page itself, but provide information about the page to search engines and other applications. Here’s an example of a meta tag for defining the character set of a webpage
Example:
<head>
<meta charset="UTF-8">
</head>This code sets the character encoding for the page to UTF-8, which is a standard encoding for web content. Other types of meta tags include ones for specifying keywords and descriptions for search engines, setting the viewport for mobile devices, and specifying the author and date of the content.
Step 13: Blog Post Example
In this example, the blog post has a title, author, date, and category displayed in the header section. The main section contains the article with an image and two paragraphs of text. A comments section is included in a separate section with a form for visitors to submit comments. Finally, the footer includes copyright information.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog Post</title>
</head>
<body>
<h1>My Blog Post</h1>
<main>
<article>
<p><img src="blog-post-image.jpg" alt="Blog post image"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu justo a urna rhoncus placerat. Phasellus eget feugiat massa. Mauris facilisis vel urna id sagittis. Praesent et rhoncus odio. Nullam ac elit sit amet erat blandit pretium. Nam sollicitudin aliquet ex ac hendrerit.</p>
<p>Donec malesuada leo id magna pharetra fringilla. Ut vel nibh nibh. In viverra magna in eros suscipit ultrices. Donec finibus ante sed mauris lacinia, sit amet rutrum velit dapibus. Nulla euismod sapien ut ipsum venenatis, id dictum magna congue. Quisque vehicula lectus eget nibh
blandit malesuada. Fusce eu felis in nulla ultrices maximus. Curabitur ultrices efficitur sapien, sit amet venenatis odio.</p>
</article>
<section>
<h2>Comments</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="comment">Comment:</label>
<textarea id="comment" name="comment"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</section>
<header>
<p>Written by: John Smith</p>
<p>Date: February 28, 2023</p>
<p>Category: Technology</p>
</header>
</main>
<footer>
<p>© 2023 My Blog. All rights reserved.</p>
</footer>
</body>
</html>We can add css styling to the HTML code at the top of the head section or below the title.
<style>
h1 {
text-align: center;
background-color: black;
color: #fff;
padding: 10px;
}
</style>
Pingback: Build a Responsive Portfolio Website from Scratch - Webdev Trainee