In the previous lesson, you were introduced to what the
Internet is and how it works, see here. In this lesson, we focus more on HTML -
Hypertext Markup Language and how to create your first HTML page in HTML
version 5. HTML is a descriptive language designed to describe web pages. It is
a markup language, which means you write the text of your web page and add
special tags around words and paragraphs. Instead of reading text in a document
in a linear structure, hypertext allows you to click from one web page to another or to a specific point in the document so that you can literally move through the content of the web page to things that interest you at a particular moment.
Hypertext allows you to navigate and view web content in a non-linear way, and that has its advantages. HTML is a subset of SGML – Standard Generalized Markup Language. HTML is used for the appearance of web content and establishing links. You simply write HTML documents with the HTML language, from the first initial; home page; to the last and connect them via links with other web documents. Each HTML document is a text file consisting of two basic parts. One in which you use HTML syntax; tags < >; to describe the way you want to display content on a web page and the content you want to display. Tags mark different parts of the page and different effects in the browser.
Pay attention to the fact that no matter how prone you are not to make mistakes when typing on the keyboard, in practice, mistakes often occur due to fatigue and doing multiple things at once. That’s why an IDE is necessary. Websites are not made up of just HTML and CSS. Dynamic and professional sites also consist of other programming languages. For example, if you are a C# programmer, learning HTML and CSS in its entirety essentially takes a very short time because most web projects require much more coding in JavaScript, an object-oriented scripting language, or C# programming code that will be executed on web servers. Then you will need the right development environment that is demanding both in terms of computer performance and the latest operating system, even databases.
Choosing the Right IDE for Your Web Development Journey
- HTML Boilerplate
- HTML CSS Support
- IntelliSense for CSS class names in HTML
- Format HTML in PHP
- Prettier - Code formatter
- vscode-icons
- Live Server
<html lang="en"> <!-- the content of this
document is html and language is English -->
<head> <!-- information about
the page -->
<meta charset="UTF-8"> <!-- unicode character
encoding -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My First HTML5 Page</title> <!-- the title on the
tab of web browser -->
</head>
<body> <!-- the content which
visible on the page -->
<!-- h heading tags in
all 6 levels -->
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
As you can see, the structure of every web document first consists of a document declaration:
<!DOCTYPE html>
This declaration also tells us that our HTML file consists of HTML version 5, otherwise the declaration would look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
After the declaration, the html open and closed tag is always written first, which means that everything between these tags is HTML code.
The first nested structure that comes after the html tag is the open and closed head tag, or what developers usually call header tags. Between these tags always stand the tags for the page title; title, and other tags that describe the site, but nothing between the header tags is displayed on the web page. Remember that it doesn’t matter whether you write the tags in lowercase or uppercase. Consider the tag for the web page title mandatory, and every web page should have a page title that will be printed on the browser tab. You can have only one web page title on one web page, and between the title tags, always use only the page title without other attributes.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My First HTML5 Page</title>
</head>
The open and closed body tags are not nested within the header tags, as are the page title tags, but rather alongside them. However, between the open and closed body tags, you write other tags and attributes and everything you want to be seen on the web page when your web page is displayed through a browser.
<body>
</body>
Look at the following content:
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
Heading tags are used to increase or decrease text size.
There are 6 levels of heading tags from the largest font size h1 to the
smallest h6. Use heading tags when you want to change the size of the text. As
for HTML, there is only one type of comment, and that is multi-line; which is
also used as single-line. Comments in HTML are written like this:
<!-- a comment -->
When you start the Live Server; you will get the following result in the browser. If you do not get the exact same result, you have made a mistake somewhere.
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
You can see how it all looks on the video, too.
No comments:
Post a Comment