Sample HTML Code: Web Development Basics
HTML - without exaggeration, the main language of the Internet, born with it. His responsibilities include the basic design of web pages, their logical structuring and formatting. There is no need to go far for examples of HTML, just open the browser. Any displayed site is the HTML you are looking for. To get to know him closer, look at the developer console.
Behind the scenes of the Internet
Open your favorite site in Google Chrome browser. This browser has the most convenient development panel, so is ideal for learning.
To quickly get to the panel, press the hot key F12 on the keyboard. If for some reason it didn’t work, find the necessary item in the browser menu and select it by clicking "Additional Tools"> "Developer Tools".
A new panel will open with several tabs, of which we need the first one - Elements. This is where the entire HTML code of the current page is described.
HTML document structure
With the help of the panel, it is possible to figure out, on a live example, how the site is arranged, to see its component parts.It is important to understand that the final appearance is provided not only by the HTML markup, but also by the styles described using CSS. In the Elements tab, you can only get acquainted with the basic structure.
All components of the page are arranged in a hierarchical order. You can view nested items using arrows.
For example, the entire HTML page is wrapped in a block with the name HTML, inside which the head and body containers are located. If you expand them, inside you can find several more levels of elements with different names.
Everything inside the head section is not rendered by the browser. The only exception is the title block, which is displayed in the tab. In the "head" of the site is the service information necessary for the Internet browser to work properly.
The contents of the body section, by contrast, are visible to the user. The developer console even allows you to see exactly where each specific block is located on the page. To do this, just hover the cursor on it.
The screenshot shows how the navigation bar stands out:
There is also a DOCTYPE element at the top. He also refers to the service data.
Tags and their attributes
HTML abbreviation literally means “Hypertext Markup Language”. That is, any web page is just text marked up in a certain way. For its formatting special elements are used - tags (descriptors).
To distinguish a tag from the text itself, it is enclosed in angle brackets. Using the example of HTML code, you can see a variety of tags: html, head, body, header, div. They are of two types:
- Closing tags with content have two parts and text between them. For example, the header descriptor is closable. The second part differs from the first by the presence of a forward slash before the tag name.
- Non-closing tags with no content consist of only one part. An example is the meta tag.
Please note that HTML descriptors are free to embed each other. The exception is unclosed tags that have no content, therefore, nothing can be inserted into them.
It is important to follow the closing procedure. In the console you can see how carefully nested handles are located. The external element cannot close before the internal one.
Any tag can have a number of parameters (attributes) that define its properties.In HTML, an example is the descriptor of the hyperlink a and its href attribute, which contains the address of the page to which the link will be made when the link is clicked.
Visual Learning HTML
For beginning web designers, web developers, and just people interested in the basics of Internet technology, learning HTML is the first step in a long, interesting journey. There are hundreds of courses and textbooks presenting information in a wide variety of ways. Choose among them suitable is not difficult.
But no matter how good the textbook is, two more are needed for success:
- independent typesetting experience;
- studying other people's HTML examples.
The developer’s console in popular browsers (besides Google Chrome, good panels can be found in Mozilla Firefox and Internet Explorer) is the best way to explore web pages. It allows you to master the basic layout patterns, learn to see the final presentation of the code, and even dynamically make changes to it.