HTML Tutorial PDF

# HTML Tutorial - Chapter 0 - Intraduction HTML stands for **Hyper Text Markup Language**. It is the language of the web. It is used to create websites. We use HTML tags to define the look and feel of a website. With an understanding of these tags and how to put them together, we can easily create beautiful websites. ## Why is HTML Important? * **HTML is used for defining the layout of a page.** This is a barebone page structure. * **CSS is used to add styling to that barebone page.** CSS is created using HTML. * **Java Script is used to program logic for the page layout.** For example, what happens when a user hovers on a text or when to hide or show certain elements. ## A Beautiful Analogy To understand HTML, CSS, and JavaScript, think about a car: * **HTML** is the **car body (only metal)** - it provides the structure. * **CSS** is **car paint, decoration etc.** - it gives the car a visual appeal. * **JavaScript** is the **car engine, interior logic** - it handles the functionality and interactivity. We will start learning how to build beautiful layouts in this course. # Installing VS Code You can use any text editor of your choice. However, I am using **VS Code** for this course because : * It is lightweight. * It is open source. * It is provided by Microsoft. To install VS Code, go to Google, type VS Code, and click on the first result. **Note:** You can write HTML in Notepad, but VS Code makes these things easier. # Chapter 1- Creating our first website We start building a website by creating a file named **index.html**. **index.html** is a special filename which is presented when the website's root address is typed. ## A Basic HTML Page **<!DOCTYPE html>** - specifies that this is an HTML5 document **<html>** - root of an HTML page **<head>** - contains page metadata **<title> Harry's Website </title>** - contains the title, which is displayed on the browser's tab. **</head>** **<body>** - the main body of the page, rendered by the browser **<h1> This is a heading </h1>** - heading tag **<p> My paragraph </p>** - paragraph tag **</body>** - closing body tag **</html> - closing html tag** ## Tag Breakdown A tag is like a container for either content or other HTML tags. Think of it like this: * An **HTML document** is the source code. It tells the browser how to display the website. * The **browser** reads the HTML code and renders the page. * The **rendered page** is what the user sees on the screen. ## Important Notes: * **Head & Body tags are children of HTML tag.** * **HTML is the parent of Head & Body tags.** * **Most of the HTML elements have opening & closing tags with content in between the opening & closing tags.** This means the tag has a beginning and an end, and the content is placed between those tags. * **Some HTML tags have no content.** These are called **empty elements**. For example, `<br>` is used to create a line break. <start_of_image> You can either use **.htm** or **.html** extension for your html files ## Inspecting HTML Code You can use the "**Inspect Element**" or "**View Page Source**" option from Chrome to look into a website's HTML Code. To understand how HTML elements are structured, remember this: **HTML Element = Start Tag + Content + End Tag** ## Comments in HTML Comments are very useful! They are used to mark text which should **not be parsed** by the browser. This means the browser will ignore them when displaying the page. Comments are useful for documenting your code and making it easier to understand. **** ## Case Sensitivity HTML is a case-insensitive language. This means that `<H1>` and `<h1>` are the same. # Chapter 1 - Practice Set 1. **Inspect your favorite website and change something on the page which is displayed.** This is a great way to start exploring HTML. You can see how changes to the code affect the page. 2. **Go to your favorite website and try to view the page source and write the exact lines of code.** Does it clone the website? Why or why not? This helps you understand how different elements work together and how the browser interprets the code. 3. **Write any HTML code inside the text file.** Does it work if you write it using Notepad? This shows you that even though VS Code is a great tool, you can still create basic HTML without it. # Chapter 2 - Basic HTML Tags We can add elements inside the **body tag** to define the page layout. HTML elements have two parts: * An opening tag. * A closing tag. **<body>** - opening tag **Content is placed between the body tags** **</body>** - closing tag ## HTML Attributes Attributes are used to add more information corresponding to an HTML tag. They are usually placed within the opening tag. For example: **<a href="https://codewithharry.com/"> Harry </a>** * **<a>** is an anchor tag. * **href** is the attribute, which specifies the URL of the link. You can use single or double quotes in attributes. ## The Heading Tag The heading tag is used to mark headings in HTML. It helps structure the page and create visual hierarchy. There are six heading tags: * **<h1>** - Most Important heading * **<h2>** - Another heading * **<h3>** - Another heading * **<h4>** - Another heading * **<h5>** - Another heading * **<h6>** - Another heading **Note: ** We should not use HTML headings to make text bold or thicker. ## The Paragraph Tag The paragraph tag (<p>) is used to add paragraphs to an HTML page. For example: **<p> This is a paragraph </p>** ## The Anchor Tag The anchor tag (<a>) is used to add links to an existing content inside an HTML page. It is commonly used for navigating to other pages or resources within the website or external websites. For example: **<a href="https://google.com/"> Click me </a>** ## The img Tag The `img` tag is used to add images in an HTML page. For example: **<img src="image.jpg" >** * `src` is the attribute that specifies the relative URL of the image. ## Bold, Italic, and Underline Tags These tags are used to highlight text: * **<b> This is bold </b>** * **<i> This is italic </i>** * **<u> This is underline </u>** ## The br Tag The br tag is used to create line breaks in an HTML document. It is an empty element, meaning it has no closing tag. ## Big and Small Tags We can make the text a bit larger and a bit smaller using the **big** and **small** tags respectively. ## The hr Tag The `<hr>` tag in HTML is used to create a horizontal ruler. It is often used to separate the content. ## Subscript and Superscript We can add subscript and superscripts in HTML using these tags: * **<sub> this </sub>** - subscript * **<sup> this </sup>** - superscript ## The pre Tag HTML usually ignores extra spaces and newlines in a piece of text. This can make it difficult to display text exactly as it was written. This can be useful for displaying code snippets or pre-formatted text. **<pre>** This is written using pre tag **<pre>** # Chapter 2 - Practice Set 1. **Create an HTML page with a heading (title heading), a primary heading, and a subheading.** Which tags did you use? 2. **Create a page with 5 wallpaper images taken from the internet.** 3. **Use `<br>` and `<hr>` tags to display a piece of text with linebreaks.** 4. **Try to write the following chemical equation using HTML.** **C + O₂→ CO₂** 5. **Try to write a Wikipedia article using HTML.** # Chapter 3 - Creating a page layout When we use the right tag in the right place, it results in a better page layout, better indexing by search engines, and a better user experience. ## Important Tags for page layout * **<header>** - contains the navigation tags * **<main>** - the main content of the website * **<footer>** - contains information about the website, copyright, etc. These tags are used to define the structure of a page. ## Tags inside the `<main>` tag * **<main>** - the main opening tag * **<section>** - a page section * **<article>** - a self-contained content * **<aside>** - content placed aside from the main content (like advertisements) * **</main>** - the main closing tag ## Creating a Page Structure Creating a structured page layout is not necessary, but it creates a readable and structured layout, which is better for SEO. Think of the structure as a blueprint for your website. ## Link Attributes Links are crucial for navigating between pages and resources. * **<a href="/contact"> Contact us </a>** - this link will open the "contact" page in the same tab. * **<a href="/contact" target="_blank"> Contact us </a>** - this link will open the "contact" page in a new tab. We can put any content inside an anchor tag. This includes images, headings, etc. ## Handling Pages in Directories If the page is inside a directory, we need to make sure that we link to the correct page. This also applies to `img` tags. ## The Div Tag The `div` tag is often used as a container for other elements. It also acts as a block-level element, meaning that it always takes full width by default. ## The Span Tag The `span` tag is an inline container. It takes as much width as necessary. # Chapter 3 - Practice Set 1. **Create an SEO-friendly website using HTML.** 2. **Create an HTML page that opens Google when clicked on an image.** 3. **Create a website that has your top 5 used websites bookmarked.** The links should open in a new tab. # Chapter 4 - Lists, Tables, and Forms ## Lists Lists are used to display content which represents a list. * **Unordered lists**: Used to list unordered items without any specific order. **<ul>** **<li> Home </li>** **<li> About </li>** **</ul>** * **Ordered lists**: Used to list ordered items with a specific order, usually numbered. **<ol>** **<li> Phone </li>** **<li> PC </li>** **<li> Laptop </li>** **</ol>** ## Tables The `table` tag is used to define tables in HTML. * It formats and displays tabular data in a structured way, making it easier to read and understand. * **<tr>** - table row * **<td>** - table data * **<th>** - table header (used in place of `<td>` to display headers) **We can define as many table rows as we want.** ## Adding a Caption to a Table Use the `<caption>` tag to add a caption to the table. ## Thead and Tbody tags * **<thead>** - used to wrap the table head (containing `<caption>`, `<tr>` and `<th>` elements) * **<tbody>** - used to wrap the table body content (containing `<tr>` and `<td>` elements). ## Colspan Attribute The `colspan` attribute is used to create cells spanning multiple columns. For example: **<th colspan = "3"> Harry </th>** This will create a header cell spanning 3 columns. ## HTML Forms HTML forms are used to collect input from the user. * **<form>** - acts as a container for form elements. ## Form Elements: Here are the most common form elements: * **<input>** - Different types include: text, checkbox, radio, button, and submit. The `type` attribute tells the browser how to handle the input. * **<textarea>** - defines a multiline text input. Use `cols` and `rows` to define the size of the textarea. * **<select>** - defines a drop-down list. # Chapter 4 - Practice Set 1. **Create an HTML page with video embedded inside it.** 2. **Replace the video with a YouTube video.** 3. **Create an HTML form for a travel website to book a vacation.** 4. **Create a table displaying the score of cricket players in a match using HTML.** # Chapter 5 - SEO We will focus only on the HTML standpoint of SEO. We will not be looking into keyword building and content optimization aspects of SEO. ## Types of SEO * **On-page SEO:** Can be done by HTML developers. This involves optimizing your website's content and structure for search engines. * **Off-page SEO:** This includes building backlinks, social media marketing, and other activities outside of your website. ## HTML SEO HTML developers can implement SEO using the following techniques: 1. **Set the title very nice and to the point.** 2. **Set the meta description.** **<meta name = "description" content = "....">** 3. **Set a nice URL slug.** 4. **Set the meta keywords tag.** 5. **Set the meta author tag.** **<meta name = "author" content="Harry">** 6. **Set a favicon.** 7. **Compress images and other resources.** This helps to improve page loading speeds and user experience. 8. **Remove unused HTML/CSS and JS files and compress them.** This reduces the overall file size and helps improve page performance. 9. **Add alt text to images.** This helps visually impaired people understand the image and improves SEO.

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue