1. Home
  2. Web design
  3. HTML5 for beginners

HTML5 for beginners

By Dec 02, 2016

Description:

Here we explain how to create with Visual Studio an HTML page and we present the main language tags.

Preferencesoft

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 &lt;?and &gt;.

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

text to click

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

text to click

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:

    

 

      

HTML5
Categories