Introduction to HTML
What is HTML?
HTML (Hyper Text Markup Language) is a series of tags that tells web browsers how to render, or display, a web page.
- Created in 1989/1990
- HTML describes the structure of Web pages using markup
- HTML elements are represented by tags
- HTML tags label pieces of content such as “heading”, “paragraph”, “table”, and so on
Introduction to MDN (Mozilla Developer Network) and W3Schools
The Mozilla Developer Network (MDN) provides information about Open Web technologies including HTML, CSS, and APIs for…developer.mozilla.org
The Basic Structure of a Web Page
A simple HTML Document
<!DOCTYPE html>declaration defines this document to be HTML5.
<html>element is the root element of an HTML page.
<head>Hold all the important behind-the-scenes information about your web page, like the title of your web page, and a links to a CSS style-sheets.
<title>Stuff between title tags doesn’t appear on the web page, but you’ll see it in search engine results and browser tabs.
<body>Everything that displays in the browser — header, navigation, images, content — goes between the body tags.
<h1>element defines a large heading.
<p>element defines a paragraph.
Comments in HTML
If you want to add a comment to your code that will not be visible in the user’s browser, you can add the text between these characters:
<!-- comment goes here -->
It is a good idea to add comments to your code because, no matter how familiar you are with the page at the time of writing it, when you come back to it later, comments will make it much easier to understand.
Commonly Used HTML Tags
HTML has six “levels”of headings.
<h1> is used for main headings.
<h2> is used for subheadings.
If there are further sections under the subheadings then the <h3> element is used, and so on ...
To create a paragraph,surround the words that make up the paragraph with an opening
<strong> element gives text strong importance, and is typically displayed in bold.
<em> element indicates emphasis that subtly changes the meaning of a sentence. By default browsers will show the contents of an
<em> element in italic.
<div>element allows you to group a set of elements together in one block-level box.
For example, you might create a
<div>element to contain all of the elements for the header of your site.
<span> is used for grouping and applying styles to inline elements.
The most common reason why people use
<span>elements is so that they can control the appearance of the content of these elements.
An ordered list starts with the
<ol> tag. Each list item starts with the
For example, the list might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be identified by a section number
An ordered list starts with the
<ul> tag. Each list item starts with the
Unordered lists are lists that begin with a bullet point (rather than characters that indicate order).
Links are the defining feature of the web because they allow you to move from one web page to another — enabling the very idea of browsing or surfing.
You will commonly come across the following types of links:
● Links from one website to another
● Links from one page to another on the same website
● Links from one part of a web page to another part of the same page
● Links that open in a new browser window
● Links that start up your email program and address a new email to someone
LINKING TO OTHER SITES
Links are created using the
<a>element which has an attribute called
<href>. The value of the
<href>attribute is the page that you want people to go to when they click on the link.
Users can click on anything that appears between the opening
<a> tag and the closing
<a>tag and will be taken to the page specified in the
LINKING TO OTHER SITES ON THE SAME SITE
When you are linking to other pages within the same site, you do not need to specify the domain name in the URL. You can use a shorthand known as a relative URL.
If all the pages of the site are in the same folder, then the value of the href attribute is just the name of the file
Relative URLs can be used when linking to pages within your own website. They provide a shorthand way of telling the browser where to find your files.
Opening Links In A New Window
If you want a link to open in a new window, you can use the
targetattribute on the opening
<a>tag. The value of this attribute should be
One of the most common reasons a web page author might want a link to be opened in a new window is if it points to another website. In such cases, they hope the user will return to the window containing their site after finishing looking at the other one.
Enjoy learning HTML & happy coding :)
Follow me on Twitter: https://twitter.com/23mmartins