Getting started with HTML

Html means Hyper text Markup Language. It is used to define the building blocks of webpages.

Different technologies in making a website

The major technologies in making a website are Html, JavaScript and Css. There are other ones like react and angular but Html, JavaScript and Css are capable enough to create your website.

HTML(Hyper text mark-up language) is the most basic block of the website, it defines the meaning and structure of web content.

What is CSS?

Cascading Style Sheets (CSS) is used for styling web pages and making them beautiful . With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more.

JavaScript makes HTML pages interactive, it it used for adding functionality to webpages.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2.

HTML documents structure

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example:

<!DOCTYPE html>

<html>

<body>

<h1>Hello world</h1>

<p>Hello World</p>

</body>

</html>

The <!DOCTYPE> Declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>

An HTML element is defined by a start tag, some content, and an end tag.

HTML Elements

The HTML element is everything from the start tag to the end tag:

<tagname>Content goes here...</tagname>

Examples of some HTML elements:

<h1>The beautiful Girl</h1>

<p>My name is Precious</p>

Note: Some HTML elements have no content (like the <br> and the <img> element). These elements are called empty elements. Empty elements do not have an end tag!

What are HTML Tags and Attributes?

HTML Tags are words that are always surrounded with "<>" and "</>" signs.

Words with this sign: "<>" is called the opening tag while words found in this sign; "</>" is called the closing tag.

HTML Attributes are used to provide additional information about HTML elements.

Attributes are always specified in the start tag. Attributes usually come in name, the equal to sign (=) and a quotation sign(" ") like: name="value"

The href Attribute: The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example: <a href="goole.com">click here</a>

The src Attribute: The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example: <img src="img_girl.jpg">

Other elements that usually have attributes are: <title>, <style>, <meta>, <link>, <script>, and <base>.

HTML Tag vs Element

HTML Tags are words embedded with these signs:<> and </>. Where this;<> Is opening tag and </> is the closing tag. Tags are used to start and end an element. Example: <h1></h1> is an heading tag.

Elements on the other hand comprises of the opening tag, the content and ends with the closing tag. For example: <h1>My first heading</h1>.

What's in the head?metadata in HTML

The HTML <meta> Element

The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.

The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services.

Examples

Define the character set used: <meta charset="UTF-8">

Define a description of your web page: <meta name="description" content="Free Web tutorials">

Define the author of a page:<meta name="author" content="John Doe">

Setting the viewport to make your website look good on all devices:<meta name="viewport" content="width=device-width, initial-scale=1.0">

Example of <meta> tags: