Thursday, April 11, 2024

Web Mastery for Beginners, Creating Your First Web Page

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.

A person codes in HTML5

A person codes in HTML5

Only by practically writing HTML documents will you understand how simple it all is. To learn just HTML and CSS – Cascading Style Sheets, you don’t need any major requirements. Most computers, even with minimal performance, will satisfy your needs. In principle, you can use any operating system and any text editor for learning and creating HTML pages. However, we recommend that you use any IDE - Integrated Development Environment, which offers correction of syntactic errors, because first of all, your HTML will be more readable, many typographical errors will be corrected automatically, and because you will be more productive.

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

For the simplest learning of HTML and CSS, we will use the Visual Studio Code integrated development environment in this HTML5 and CSS3 tutorial. Anything you do is certainly better than a simple text editor. If Visual Studio Code is also your choice, then it doesn’t matter which operating system you use. Watch videos on how to install Visual Studio Code on Windows or Linux operating system.


Windows - 1. How to install Visual Studio Code & .Net Core 7.0 ?


Windows - 32. How to install DotNet 8 and VSCode on Windows11 ?


Linux - 2. How to install Visual Studio Code and .NET Core 7.0 ?


Linux - 27. How to install Visual Studio Code on Kali Linux?


Linux - 28. How to install VSCode and DotNet 8 on Kali Linux ?

Start your HTML editor, create a folder named html_css_tutorial and save a *.html file in it. You can also save your file as a *.htm file, but we do not recommend that. Name the file lesson1 because it will be the starting page regardless of the fact that it consists of only one file. Always keep in mind that a web site is made and linked from the starting page, which is often called home.html or index.html, to distinguish it from all other pages, but we are not making a starting page but the first lesson. Then, if you are using Visual Studio Code, install the following extensions:
  • HTML Boilerplate
  • HTML CSS Support
  • IntelliSense for CSS class names in HTML
  • Format HTML in PHP
  • Prettier - Code formatter
  • vscode-icons
  • Live Server
Then type the following code:

 <!DOCTYPE html> <!-- declaration the document html5 -->

<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.

 <html> </html>

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.


HTML5 & CSS3 - 1. How to Start with HTML5 and CSS3? Your First Web Page!



 


 

 

 

 

 

 

No comments:

Post a Comment