HTML5 for beginners
By Jean-Claude Colette Dec 02, 2016
Here we explain how to create with Visual Studio an HTML page and we present the main language tags.
Text in a page
If you are new to HTML, start by
typing plain text between the
</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
Give it a try, start Visual Studio, open
New > Web Site and in the New Web Site box select
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
are not html instructions, but you can only delete
<form id="form1" runat="server">
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
Others are self-closing: for example,
<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
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:
<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>is a container used to group several elements through a text online.
<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:
Give the result:
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
accompanied by the href attribute. Here is an example:
href="http://www.kodfor.com/Default.aspx">text to click</a>
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.
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.
And refer to it in the following way:
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.
You want to allow visitors to leave you a message by clicking on text.
to contact me
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
which is accompanied by alt (alternative text)
and src attributes that specifies the path to the image.
src="Images/image.png width=200 height=100 alt="An image"/>