HTML Basics: A PDF Handbook for Beginners with Examples
HTML Tutorial for Beginners with Examples PDF Free 13
Welcome to this HTML tutorial for beginners with examples PDF free 13. In this tutorial, you will learn the basics of HTML, how to write HTML code, how to create a simple HTML page, how to style HTML elements, how to add interactivity to HTML elements, and how to test and debug HTML code. By the end of this tutorial, you will be able to create your own web pages using HTML.
html tutorial for beginners with examples pdf free 13
What is HTML?
HTML stands for HyperText Markup Language. It is the standard language for creating web pages and web applications. HTML describes the structure and content of a web page using tags, attributes, and text. A web browser interprets HTML code and displays it as a formatted web page.
HTML was invented by Tim Berners-Lee in 1991 as a way to share information on the World Wide Web. Since then, HTML has evolved through several versions, such as HTML 4.01, XHTML 1.0, and HTML5. The current version of HTML is HTML5, which was released in 2014 and is supported by all modern browsers.
Why learn HTML?
HTML is the foundation of web development. It is essential for creating any kind of web page or web application. Learning HTML will enable you to:
Create your own personal or professional website
Enhance your resume or portfolio
Understand how other websites work
Communicate effectively on the web
Customize your online presence
HTML is also easy to learn and use. You don't need any special software or tools to write HTML code. You can use any text editor or code editor of your choice. You can also view your HTML code in any web browser of your choice.
How to write HTML code?
HTML code consists of three main components: basic syntax, elements, and attributes.
An HTML element is a building block of a web page. It represents a part of the web page, such as a heading, a paragraph, an image, or a list. An HTML element is defined by a start tag, an end tag, and the content between them. For example:
<h1>This is a heading</h1>
This is an HTML element that represents a level one heading. The start tag is <h1> and the end tag is </h1>. The content between the tags is "This is a heading".
Some HTML elements are self-closing, which means they don't have an end tag. They only have a start tag with a slash at the end. For example:
<img src="image.jpg" alt="This is an image">
This is an HTML element that represents an image. The start tag is <img src="image.jpg" alt="This is an image"> and there is no end tag.
An HTML attribute is a modifier of an HTML element. It provides additional information about the element, such as its source, size, color, or style. An HTML attribute is defined by a name and a value, separated by an equal sign, within the start tag of the element. For example:
<p style="color:red">This is a paragraph</p>
This is an HTML element that represents a paragraph. The start tag is <p style="color:red"> and the end tag is </p>. The content between the tags is "This is a paragraph". The attribute name is style and the attribute value is color:red. The attribute modifies the element by changing its color to red.
Some HTML attributes are global, which means they can be used on any element. For example, the id attribute can be used to assign a unique identifier to an element. Some HTML attributes are specific, which means they can only be used on certain elements. For example, the src attribute can only be used on elements that have a source, such as images or videos.
An HTML comment is a piece of text that is not displayed by the browser. It is used to add notes or explanations to the HTML code. An HTML comment is defined by <!-- and --> symbols. For example:
<!-- This is a comment -->
This is an HTML comment that says "This is a comment". It is not displayed by the browser.
How to create a simple HTML page?
To create a simple HTML page, you need to follow these steps:
Create a new file with .html extension
Write the basic HTML structure
Add the HTML document type declaration
Add the HTML head section
Add the HTML body section
Save and view your HTML page in the browser
Let's see an example of how to create a simple HTML page.
HTML document type declaration
The first line of an HTML page should be the document type declaration. It tells the browser what version of HTML you are using. The document type declaration for HTML5 is:
HTML head section
The second part of an HTML page is the head section. It contains metadata and links that are not displayed by the browser, but are used by the browser or other services to understand or enhance your web page. The head section is defined by <head> and </head> tags. For example:
<head> <title>My First Web Page</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head>
This head section contains three elements: a title element, a meta element, and a link element. The title element defines the title of your web page, which appears in the browser tab or window. The meta element defines the character encoding of your web page, which affects how your text is displayed by the browser. The link element defines a link to an external style sheet, which affects how your web page looks.
HTML body section
<body> and </body> tags. For example:
<body> <h1>This is a level one heading</h1> <p>This is a paragraph</p> <img src="image.jpg" alt="This is an image"> <ul> <li>This is a list item</li> <li>This is another list item</li> </ul> </body>
This body section contains four elements: a level one heading element, a paragraph element, an image element, and an unordered list element. The heading element defines the main title of your web page, which appears in large and bold text. The paragraph element defines a block of text, which appears in normal text. The image element defines an image, which appears with the specified source and alternative text. The unordered list element defines a list of items, which appears with bullet points.
How to style HTML elements?
To style HTML elements, you need to use CSS (Cascading Style Sheets). CSS is a language that describes how HTML elements should look on the web page. You can use CSS to change the color, size, font, alignment, margin, padding, border, background, and other properties of HTML elements. You can write CSS code in three ways: inline styles, internal style sheets, and external style sheets.
To apply CSS styles to HTML elements, you need to use CSS selectors. CSS selectors are patterns that match HTML elements based on their tag name, id, class, attribute, or position. For example:
p color: blue;
This is a CSS selector that matches all paragraph elements and changes their color to blue.
#intro font-size: 24px;
This is a CSS selector that matches the element with id="intro" and changes its font size to 24 pixels.
.highlight background-color: yellow;
This is a CSS selector that matches all elements with and changes their background color to yellow.
To specify the appearance of HTML elements, you need to use CSS properties. CSS properties are keywords that define how a certain aspect of an HTML element should look. For example:
This is a CSS property that defines the text color of an HTML element.
This is a CSS property that defines the width of an HTML element.
border: 1px solid black;
This is a CSS property that defines the border of an HTML element.
To specify the size and position of HTML elements, you need to use CSS units. CSS units are symbols that represent a measurement of length, angle, time, or frequency. For example:
This is a CSS unit that represents an absolute unit of length based on the screen resolution.
This is a CSS unit that represents a relative unit of length based on the parent element's size.
This is a CSS unit that represents a relative unit of length based on the current font size.
How to add interactivity to HTML elements?
// This is a comment var x = 10; // This is a statement x + 5; // This is an expression x = x + 5; // This is an operator var y = x + 5; // This is a variable function add(a,b) // This is a function return a + b;
var num = 10; // This is a number var str = "Hello"; // This is a string var bool = true; // This is a boolean var arr = [1,2,3]; // This is an array var obj = name: "Alice", age: 25; // This is an object
function add(a,b) // This is how to define a function return a + b; // This is how to return a value var result = add(5,6); // This is how to call a function and assign the return value to a variable
<button id="btn">Click Me</button> <script> var btn = document.getElementById("btn"); // This is how to access an HTML element by its id btn.onclick = function() // This is how to assign an event handler to an HTML element alert("You clicked me!"); // This is how to display an alert message ; </script>
How to test and debug HTML code?
To test and debug HTML code, you need to use some tools and techniques. Testing means checking if your HTML code works as expected and meets your requirements. Debugging means finding and fixing errors or bugs in your HTML code.
Browser developer tools
code editor is a software application that allows you to write and edit HTML code with syntax highlighting, auto-completion, indentation, formatting, and other features that make your code more readable and error-free. Some examples of code editors are Visual Studio Code, Sublime Text, Atom, and Notepad++.
A third useful tool for testing and debugging HTML code is the validator. A validator is a web service or a software application that checks and fixes errors or bugs in your HTML code. A validator can help you improve the quality and compatibility of your HTML code. Some examples of validators are W3C Markup Validation Service, HTML Tidy, and HTML Validator.
If you want to learn more about HTML or practice your skills, you can visit some of these resources:
W3Schools HTML Tutorial
MDN Web Docs HTML Tutorial
Codecademy Learn HTML Course
FreeCodeCamp Basic HTML and HTML5 Course
Thank you for reading this HTML tutorial for beginners with examples PDF free 13. We hope you enjoyed it and learned something new. Happy coding!
What is the difference between HTML and XHTML?
HTML and XHTML are both markup languages for creating web pages. The main difference between them is that XHTML is a stricter and cleaner version of HTML. XHTML follows the rules of XML (Extensible Markup Language), which means that it requires all tags to be lowercase, closed, nested properly, and quoted correctly. XHTML also has some additional features that are not available in HTML, such as namespaces and XML declarations.
What is the difference between HTML and CSS?
HTML and CSS are both languages for creating web pages. The main difference between them is that HTML defines the structure and content of a web page using tags, attributes, and text. CSS defines the style and appearance of a web page using selectors, properties, and values. HTML and CSS work together to create a complete web page.
What is the difference between HTML and PHP?
HTML and PHP are both languages for creating web pages. The main difference between them is that HTML defines the structure and content of a web page using tags, attributes, and text. PHP defines the logic and functionality of a web page using statements, expressions, operators, variables, and functions. PHP is a server-side language, which means that it runs on the web server and generates HTML code that is sent to the browser. HTML is a client-side language, which means that it runs on the browser and displays the web page.
What is the difference between HTML and XML?
HTML and XML are both markup languages for creating web pages. The main difference between them is that HTML defines a fixed set of tags and attributes that are used to describe the structure and content of a web page. XML defines a flexible set of tags and attributes that are used to describe the data and information of a web page. XML is more general and versatile than HTML, but it requires more rules and syntax to be valid. 71b2f0854b