What is HTML?
HTML is an acronym for: Hypertext Markup Language. An HTML document is used is used for displaying text, links, images video on the internet that can be viewed on the user’s web browser. The current Version of HTML standard is version 5. HTML documents use the .html file name extension. HTML documents was first created in 1993 by Sir Tim Berners-Lee, a computer scientist.
An HTML document is sent from the web server computer to the user’s web browser via the HTTP protocol ( Hyper Text Transfer Protocol ). The server-side application used to for this purpose is called Apache web server. Files are sent by means of the FTP ( File Transfer Protocol ) ( HTTP can also handle files it seems 🤔 ). On a user’s local PC, files are sent using the file protocol. Email is sent via SMTP ( Simple Mail Transfer Protocol ).
The source code of an HTML, CSS and Javascript document can be viewed in your web browser by typing: Ctrl + U on your desktop PC, Cmd + U on Mac OS, and on a mobile browser such as smartphone or Tablet one can type: view-source: in front of the website you are viewing. Eg: view-source:www.google.com This command also works on desktop PC as well.
We can Create / edit an HTML document in many different ways:
You can use any text editor to edit an HTML document Eg: Notepad on Windows PC, Microsoft Word, Notepad++, Geany, Vscode, etc. With Notepad one simply save the file with the .txt extention and rename it to .html
A basic HTML document:
Copy this text to a Notepad document, save as .txt and rename to .html Then open it in your web browser:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML document</title>
</head>
<body>
<!-- This text is hidden and won’t show in the browser -->
<h3>Hello, world!</h3>
</body>
</html>
What
does each tag do? 🤓
<!DOCTYPE html>
This is the tag is actually not an HTML tag but defined as a “declaration”. It defines the document is an HTML document. It has only one “tag”. It can also be written as <!Doctype html> etc. as the declaration is not case sensitive.
<html></html>
This tag is encompasses all other tags in the HTML document. It is only the <!DOCTYPE html> tag that is located outside of the html tag.<head></head>
This tag defines various information. Most information in the head tag are not visible to the user. The title tag is one of the few tags in the head tag, that are visible to the user. The head also contains <meta> tags which contain information that are used by search-engines like Google search.<title></title>
This tag contains the title of the specific HTML document. The title of the HTML document is displayed in the tab of the browser. This makes it easy to identify which document you are viewing.
<!-- -->
The comment tag is used by web designers / developers to comment on the code that they write. The comment tags can also be used to temporarily hide specific sections of code when debugging a web application because the developer can narrow down which section of code it is that is not working correctly.
<body></body>
The body tags contain all the visible text, images, video and other media that are linked to the HTML document. The text can be in the form of paragraphs, tables, headings, ordered-and unordered lists, forms, etc.
<h3>Hello, world!</h3>
The <h1> to <h6> denotes a heading in a paragraph. The <h1> tag is the largest heading and <h6> the smallest heading.
Most HTML tags have a start and end-tag. This is the start tag of the head: <head>
This is the end tag: </head> Some tags do not have an end tag. Eg: <br /> This tag means line break and creates a space between paragraphs in the body section of the HTML document.
Have a look at the following screen shots:
Figure 1:
Note that the active tab title text also appears at the top of the browser to show it is the tab that is active. Also, in the address bar, https:// is displayed before the www.codesk.co.za to indicate that this page is delivered to the user using the HTTP protocol. The padlock icon is used to indicate that www.codedesk.co.za is delivered via secure HTTP or HTTPS.
Figure 2:
Since our First HTML document is stored on your local computer, the web browser displays file:/// in front of the document to indicate the document is delivered to the browser via the file protocol. The text “Hello, World!” is also displayed as the <h3> tag is contained in the body tag and therefore, is visible text.
Some more notes on HTML:
The HTML document can also contain other languages’ code that can be embedded into the HTML document. Some examples of other language code that can be embedded into an HTML document are: CSS, Javascript and PHP.It
can be said that HTML is used for the content of a web page, CSS is
used for formatting the content and styling it, Javascript is used to
animate webpages, display adverts, etc. and lastly server-side
scripting languages like PHP is used for creating Login and
registration and other complex functionality to a website. This is
not set in stone but as the languages and their functions sometimes
overlap.
Conclusion:
This concludes the basic HTML lesson. Join me next time as we delve deeper into HTML and explore more tags for content, search-engine information, etc.