HTML5 for beginners
By Jean-Claude Colette Dec 02, 2016
Description:
Here we explain how to create with Visual Studio an HTML page and we present the main language tags.

To learn HTML language on Windows, I advise you to use Visual Studio. It automatically colors the HTML syntax and underscores any errors in the code. It recognizes JavaScript language. It also allows to view your pages in your Web browser.
Text in a page
If you are new to HTML, start by
typing plain text between the <body>
and </body>
tags. I
recommend that you choose the UTF-8 character encoding in order to type
text in any language. However, some special characters may not always be
directly inserted in the text like for example < and > because they are
reserved to delimit the tags.
If you write <hello> in your text,
this expression in angle brackets will be interpreted as an HTML tag and
you will cause an error in your browser and <hello> will not be
displayed. But you can get special characters < and > placing in the text
the entities <
?and >
.
Give it a try, start Visual Studio, open
New > Web Site and in the New Web Site box select
visual
C#
and ASP.NET Empty Web Site, and create a Web Form
file (Default.aspx and Default.aspx.cs files).
Automatically, Visual Studio will pre-fill the file with the following
code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
The first line and the lines containing
form
are not html instructions, but you can only delete
<form id="form1" runat="server">
and
</form>
HTML tags are of several types. Some mark the beginning or the end of a
block.
They have a start tag and an end tag for
example <body>
and </body>
.
Others are self-closing: for example,
<br
/>
or <img ... />
By viewing your page in the browser, you may have noticed that even leaving several spaces between words, the words are separated by a blank character.
More a passage to the line after a Word has no effect on the text of the final page.
To highlight your text, you can use the following tags:
-
<br />
to return the rest of the text on line -
<b></b>
to write text in bold -
<strong></strong>
to write the text in bold considering as important -
<em></em>
to emphase the text (accentuates the text) -
<i></i>
to write the text in italics
Structured text
If you intend to write an article or a book, you will need to lay out your text. You will need to insert titles and subtitles, define paragraphs, change font of some letters, etc.
To do this, you can use the following tags:
<h1></h1>
,
<h2></h2>
, <h3></h3>
,
<h4></h4>
, <h5></h5>
,
<h6></h6>
are used
to set titles or sub-titles (from most important to least)
-
<p></p>
to define a paragraph -
<q></q>
to insert a short citation online -
To change the text color or font, it's a little more complicated. It uses containers
<span></span>
and<div></div>
. -
<span></span>
is a container used to group several elements through a text online. -
While
<div></div>
is a container of type block that can combine text and other block tags.
These containers can be used to modify the properties of the content in the following way:
<span
style="color:#0000FF;font-size:10pt;font-family:courier">Mr
Spock</span>
Give the result:
Mr Spock
Hyperlinks
Links
Hyperlinks appear in a page in the form of clickable text part and can reference a point on the page, another page of your site, or a page of a site any.
To create a link, it uses the tag <a></a>
accompanied by the href attribute. Here is an example:
<a
href="http://www.kodfor.com/Default.aspx">text to click</a>
This gives
If the reference is a file in the website, can simply place a relative path from the current directory.
For SEO, the links are very important. They are at the base of the internet navigation.
You can use will of the internal links on your site. On the other hand, one must be careful on links that point outwards.
We do that in another article.
On the other hand, can liven up a link to an image, but for now we simply a page of text.
Internal links
If your page is long enough and you want to refer to any part of the page, you can set an anchor to the place of destination.
<a
name="here">Arrival</a>
And refer to it in the following way:
<a
ref="#here">Departure</a>
Example:
Arrival
.
.
.
.
Departure
These internal links are used in a menu placed at the beginning or end of a page to refer the reader directly to the corresponding paragraph.
E-mails
You want to allow visitors to leave you a message by clicking on text.
<a href="mailto:john@preferencesoft.com">text
to click</a>
to contact me
Images
Some webmasters are reluctant to place many images on their pages because they inevitably delay the loading of the page.
If loading is too slow readers may get discouraged and leave your site. If there is no image in the text, this may annoy the reader.
But with image processing software, you can decrease the density of an image while maintaining acceptable quality for a Web site.
To insert an image, it uses the tag
<img...
/>
which is accompanied by alt (alternative text)
and src attributes that specifies the path to the image.
<img
src="Images/image.png width=200 height=100 alt="An image"/>
Example:
