Quick and easy HTML tutorial
In this HTML tutorial we will learn the basics involved in creating a web page. HTML stands for HyperText Markup Language. This is the language behind a lot of Web webpages. The language is made up of elements that describe the structure and format of the content on a Website Page.
HTML is maintained by the world Wide Web Consortium (W3C). As of this authoring, the most up to date versions are HTML 5.2 https://www.w3.org/TR/2017/REC-html52-20171214/ for your specifications. In this lesson, we’ll tackle the HTML5 but for simplicity, we’ll usually send to it as HTML.
We’ll get started with a simple HTML tutorial.
Exercise: A Simple HTML Page
Duration: 5 to 15 minutes.
In this exercise, you will produce your first HTML document by simply copying the writing shown below. The purpose is to provide you with some sense of the framework of an HTML doc.
Open a simple content editor including Notepad and develop a new file. Do not use an HTML editor for this exercise.
Save the file as index.html in the ni2u-site folder.
Type the following exactly as shown:
Save the file again and then open it in the internet browser by navigating to the file within your folder system and double-clicking on it. The site should appear as follows:
The HTML Make-up
At its simplest, an HTML website consists of what can be thought of as a skeleton – the main structure of the website. It looks like this:
The <head> Element
The <head> element is made up of information that is not displayed on the site itself. A few of the elements commonly discovered in the <head> are:
- Title of the web site (<title>). Browsers typically show the title in the “title bar” at the top of the web browser window.
- Meta tags, which contain descriptive specifics of the page (<meta />)
- Style blocks, in which contain Cascading Style Sheet rules (<style>).
- References (or web links) to external style sheets (<link />).
The <body> Element
The <body> element contains all of the information that appears on the site itself. Body tags will be covered thoroughly throughout this manually operated.
Extra whitespace is ignored in HTML. This means which all hard returns, tabs and multiple spaces are condensed into a single space for display purposes.
Edit your index.html again with the following code
HTML Tutorial Explanation
The two sentences in the programming above will be rendered in exactly the same way.
Blocks and Inline Elements
Block elements are elements that separate a block of content. Such as, a part (<p>) element is a block element. Other block elements include:
Lists (<ul> and <ol>)
Inline elements are elements that affect only snippets of content and do not block off a section of a web site. Examples of inline elements include:
Website links (<a>)
Formatting tags (<b>, <i>, <tt>, and so forth.) (see footnote)
Phrase elements (<em>, <strong>, <code>, etc.)
Inline elements cannot be direct children of the body element. They must be contained within a block-level element.
Comments are generally used for one of three purposes.
- To compose helpful notes regarding the code; for example, why anything is developed in a distinct way.
- To comment out some programming which is not currently needed, but may possibly be used sometime at some point.
- To debug a site.
HTML comments are enclosed in <!– and –>. Such as:
<!– This is an HTML comment –>
26th March 2019
26th March 2019
20th February 2019