HTML Basics

1. Introduction to HTML

1.1. What is HTML and why is it important?

HTML stands for HyperText Markup Language. It is a programming language used to create and structure content on the internet. HTML is used to create websites, and it allows us to add text, images, and other elements to a webpage.

HTML is important because it allows us to create and share information with others on the internet. Without HTML, the internet would not be able to display the text, images, and other content that we see on websites.

1.2 Brief history of HTML

HTML was first developed in the late 1980s by Tim Berners-Lee, a British computer scientist. At the time, he was working on a project called the World Wide Web, which was a system for sharing information over the internet. HTML was created as a way to structure and display this information on the web.

Over the years, HTML has undergone many changes and updates. The most recent version of HTML is HTML5, which was released in 2014. HTML5 introduced new features such as video and audio support, and the ability to create interactive graphics using the canvas element.

1.3 How HTML is used to create websites

To create a website using HTML, you will need to use a text editor to write the HTML code. This code consists of a series of tags and elements that tell the web browser how to display the content of the webpage.

Once you have written the HTML code, you can save it as an HTML file and open it in a web browser to see how the webpage will look. You can also use other programming languages such as CSS (Cascading Style Sheets) to style and layout the webpage.

2. Basic HTML structure

2.1 Introduction to HTML tags and elements

HTML tags are used to mark up the content of a webpage. They tell the web browser how to display the content, and they are written using angle brackets (e.g. <tagname>).

There are many different types of HTML tags, and each one has a specific purpose. Some examples of common HTML tags include:

<p>: used to create a paragraph of text

<h1>: used to create a heading

<img>: used to add an image to a webpage

<a>: used to create a hyperlink

HTML elements are the content that is contained within an HTML tag. For example, if you want to create a paragraph of text, you would use the <p> tag to mark the beginning and end of the paragraph, and the text itself would be the element.

2.2 The structure of an HTML document (head and body)

An HTML document consists of two main sections: the head and the body. The head of the document contains information about the webpage, such as the title and any CSS styles that are used to style the webpage. The body of the document contains the content of the webpage, such as text, images, and other elements.

Here is an example of the basic structure of an HTML document:

<!DOCTYPE html>

<html>

<head>

<title>My Website</title>

</head>

<body>

<h1>Welcome to my website!</h1>

<p>This is my first website using HTML.</p>

</body>

</html>

2.3 Creating a simple HTML page

To create a simple HTML page, you will need to use a text editor to write the HTML code. You can use a basic text editor like Notepad on Windows or TextEdit on Mac, or you can use a more advanced text editor like Sublime Text or Atom.

To create a simple HTML page, follow these steps:

Open your text editor and create a new file.

Type the following code into the file:

<!DOCTYPE html>

<html>

<head>

<title>My Website</title>

</head>

<body>

<h1>Welcome to my website!</h1>

<p>This is my first website using HTML.</p>

</body>

</html>

Save the file as “index.html”.

Open the file in a web browser to see how the webpage will look.

3. Text formatting with HTML

3.1 Using headings, paragraphs, and line breaks

HTML provides several tags that you can use to format the text on your webpage.

Headings are used to create different levels of headings and subheadings. There are six levels of headings, ranging from <h1> (the largest) to <h6> (the smallest). Here is an example of how to use headings in HTML:

<h1>This is a level 1 heading</h1>

<h2>This is a level 2 heading</h2>

<h3>This is a level 3 heading</h3>

<h4>This is a level 4 heading</h4>

<h5>This is a level 5 heading</h5>

<h6>This is a level 6 heading</h6>

Paragraphs are used to create blocks of text. To create a paragraph in HTML, you can use the <p> tag. Here is an example of how to use the <p> tag:

<p>This is a paragraph of text.</p>

Line breaks are used to create a new line in the text without starting a new paragraph. To create a line break in HTML, you can use the <br> tag. Here is an example of how to use the <br> tag:

This is some text.<br>

This is more text on a new line.

3.2 Adding emphasis with bold and italic text

To add emphasis to certain words or phrases in your text, you can use the <b> and <i> tags to make them bold or italic. Here is an example of how to use these tags:

This text is <b>bold</b>.

This text is <I>italic</i>.

3.3 Creating lists (ordered and unordered)

Lists are used to organize information in a structured way. There are two types of lists in HTML: ordered lists and unordered lists.

Ordered lists are used to create lists of items that are numbered. To create an ordered list in HTML, you can use the <ol> tag. Each item in the list should be contained within an <li> (list item) tag. Here is an example of an ordered list:

<ol>

</ol>

Unordered lists are used to create lists of items that are not numbered. To create an unordered list in HTML, you can use the <ul> tag. Each item in the list should be contained within an <li> (list item) tag. Here is an example of an unordered list:

<ul>

</ul>

4. Links and images

4.1 Adding hyperlinks to text and images

Hyperlinks are used to link to other webpages or to files on the internet. To create a hyperlink in HTML, you can use the <a> (anchor) tag. The <a> tag requires an attribute called “href” (hypertext reference) which specifies the destination of the link. Here is an example of how to create a hyperlink to a webpage:

<a href=”http://www.example.com”>Click here to visit example.com</a>

You can also use the <a> tag to create a hyperlink to a file, such as a PDF or an image. To do this, you will need to specify the file’s location using the “href” attribute. Here is an example of how to create a hyperlink to a file:

<a href=”/files/myfile.pdf”>Click here to download my file</a>

4.2 Linking to external websites and pages within the same website

To create a hyperlink to an external website, you will need to include the full URL of the website in the “href” attribute. For example:

<a href=”http://www.example.com”>Click here to visit example.com</a>

To create a hyperlink to a page within the same website, you will need to specify the path to the page using the “href” attribute. For example, if you have a webpage called “about.html” in the root directory of your website, you can create a hyperlink to it like this:

<a href=”/about.html”>Click here to visit the about page</a>

4.3 Adding images to a webpage and resizing them

To add an image to a webpage, you can use the <img> (image) tag. The <img> tag requires an attribute called “src” (source) which specifies the location of the image file. You can also use the “alt” (alternative text) attribute to provide a description of the image for users who are unable to see it. Here is an example of how to add an image to a webpage:

To resize an image, you can use the “width” and “height” attributes. These attributes specify the width and height of the image in pixels. Here is an example of how to resize an image:

5. Tables and forms

5.1 Creating tables to display data

Tables are used to display data in a structured way. To create a table in HTML, you can use the <table> tag. The <table> tag is used to define the start and end of the table, and it can contain other tags such as <tr> (table row), <th> (table heading), and <td> (table data).

5.2 Using form elements such as text inputs, radio buttons, and checkboxes

Forms are used to collect user input on a webpage. To create a form in HTML, you can use the <form> tag. The <form> tag can contain various form elements such as text inputs, radio buttons, checkboxes, and buttons.

Text inputs are used to collect single-line or multi-line text from the user. To create a text input in HTML, you can use the <input> tag. The <input> tag requires an attribute called “type” which specifies the type of input field. For example, to create a single-line text input, you can use the “type” attribute “text”.

Radio buttons are used to collect a single selection from a group of options. To create a group of radio buttons in HTML, you can use the <input> tag with the “type” attribute “radio”. Each radio button in the group should have the same “name” attribute, and a different “value” attribute.

Here is an example of how to create a group of radio buttons in HTML:

<form>

<label>

<input type=”radio” name=”radio” value=”Option 1″> Option 1

</label>

<br>

<label>

<input type=”radio” name=”radio” value=”Option 2″> Option 2

</label>

<br>

<label>

<input type=”radio” name=”radio” value=”Option 3″> Option 3

</label>

</form>

Checkboxes are used to collect multiple selections from a group of options. To create a group of checkboxes in HTML, you can use the <input> tag with the “type” attribute “checkbox”. Each checkbox in the group should have a different “value” attribute.

Here is an example of how to create a group of checkboxes in HTML:

<form>

<label>

<input type=”checkbox” name=”checkbox” value=”Option 1″> Option 1

</label>

<br>

<label>

<input type=”checkbox” name=”checkbox” value=”Option 2″> Option 2

</label>

<br>

<label>

<input type=”checkbox” name=”checkbox value=”Option 3″> Option 3

</label>

</form>

5.3 Using the <select> and <option> tags to create dropdown menus

Dropdown menus are used to allow the user to select an option from a list. To create a dropdown menu in HTML, you can use the <select> and <option> tags. The <select> tag is used to define the start and end of the dropdown menu, and the <option> tags are used to define the options in the menu.

Here is an example of how to create a dropdown menu in HTML:

<form>

<label>Choose a fruit:</label>

<br>

<option value=”Apple”>Apple</option>

<option value=”Banana”>Banana</option>

<option value=”Orange”>Orange</option>

</select>

</form>

6. Page layout and styling

6.1 Using divs and spans to structure and style the layout of a webpage

Divs (division tags) and spans are used to structure and style the layout of a webpage. Divs are used to create blocks of content that can be styled independently, while spans are used to style inline elements within a block of text.

6.2 Adding colors and backgrounds to elements

You can use CSS to add colors and backgrounds to elements on your webpage. To add a background color to an element, you can use the “background-color” property. To add a background image, you can use the “background-image” property.

To add a color to text, you can use the “color” property.

6.3 Using CSS to style a webpage

CSS (Cascading Style Sheets) is a stylesheet language used to style and layout the content of a webpage. You can use CSS to control the appearance of elements such as headings, paragraphs, and images.

To use CSS to style a webpage, you will need to create a separate CSS file or include the CSS code in the head of your HTML document.

7. Working with multimedia

7.1 Adding audio and video to a webpage

To add audio or video to a webpage, you can use the <audio> and <video> tags. The <audio> and <video> tags allow you to play audio or video files on your webpage.

To use the <audio> or <video> tags, you will need to specify the source of the audio or video file using the “src” attribute. You can also use the “controls” attribute to show the audio or video controls, such as play, pause, and volume.

Here is an example of how to add an audio file to a webpage using the <audio> tag:

Here is an example of how to add a video file to a webpage using the <video> tag:

7.2 Embedding YouTube videos

You can also embed YouTube videos in your webpage using the <iframe> (inline frame) tag. To embed a YouTube video, you will need the video’s URL and the “embed” code provided by YouTube.

Here is an example of how to embed a YouTube video in your webpage using the <iframe> tag:

Replace “VIDEO_ID” with the video’s ID, which can be found in the video’s URL.

8. Debugging and testing

8.1 Using the browser’s developer tools to find and fix errors

Every modern web browser has a set of developer tools that can be used to debug and test HTML and CSS code. These developer tools allow you to inspect the HTML and CSS of a webpage, and see how the webpage is rendered in the browser.

To access the developer tools in most browsers, you can right-click on an element on the webpage and select “Inspect” from the context menu. This will open the developer tools in a separate panel.

In the developer tools, you can use the “Elements” tab to view the HTML code of the webpage, and the “Styles” tab to view the CSS code. You can also use the “Console” tab to view any error messages and debug your code.

8.2 Validating HTML and CSS code

It is important to validate your HTML and CSS code to ensure that it is well-formed and follows the standards. You can use online tools such as the W3C HTML Validator and the W3C CSS Validator to check your code for errors.

To use these tools, you can simply enter the URL of your webpage or paste your HTML or CSS code into the tool and click “Check”. The tool will then check your code for errors and provide suggestions for fixing them.

9. Advanced topics

9.1 Using JavaScript to add interactivity to a webpage

JavaScript is a programming language that is used to add interactivity to a webpage. You can use JavaScript to create dynamic effects such as animations, pop-ups, and form validation.

To use JavaScript in an HTML webpage, you can include the JavaScript code in a script tag in the head or body of the HTML document. Here is an example of how to include a JavaScript file in an HTML document:

To execute a JavaScript function when a webpage loads or when a user interacts with the webpage, you can use event handlers such as “onload” and “onclick”.

Here is an example of how to execute a JavaScript function when a button is clicked:

<button onclick=”myFunction()”>Click me</button>

function myFunction() {

alert(“You clicked the button!”);

}

</script>

9.2 Using APIs to access data from other websites

APIs (Application Programming Interfaces) are used to allow one website to access data from another website. You can use APIs to access data such as weather forecasts, news articles, and social media posts.

To use an API, you will need to make a request to the API’s URL using a programming language such as JavaScript. The API will then return the data in a format such as JSON (JavaScript Object Notation), which can be parsed and used in your webpage.

Here is an example of how to use the Fetch API in JavaScript to make a request to an API:

fetch(‘https://api.example.com/endpoint?key=YOUR_API_KEY’)

.then(response => response.json())

.then(data => {

console.log(data);

});

9.3 Using libraries and frameworks to speed up development

Libraries and frameworks are pre-written code that can be used to speed up development and add functionality to a webpage. Some popular libraries and frameworks for web development include jQuery, React, and Angular.

To use a library or framework in your webpage, you will need to include the library or framework’s file in the head of your HTML document. Here is an example of how to include the jQuery library in an HTML document: