b - Structure of an HTML document

PythonTechLangage HTMLLeave a comment

The HyperText Markup Language, usually abbreviated HTML, is the data format designed to represent web pages. It is a markup language used to write hypertext, hence its name. HTML also allows for semantic structuring and formatting of page content, including multimedia resources including images, input forms, and computer programs.

1 - The tags of an HTML document


Starting and Ending HTML  Document Commands

<Html> and </html>

 Document Header:  Information Not Displayed

<Head> Header informations of HTML document here ! </head>

Title of HTML document

<Title>Document Title here ! </Title>

 Body of HTML Document

<Body> Body of HTML  document here ! </body>

 2 - Structure of an HTML document

<HTML>
<HEAD>
<TITLE>Example of an HTML document   </TITLE>
</HEAD>
<BODY>
Here is a sample HTML page
</BODY>
</HTML>

 3 - Viewing an HTML page


To visualise an HTML page, several solutions are available, we will give you the simplest !

  • Launch the Dreamweaver CS6 editor :

dreamweaver-cs6-new.png : Dreamweaver has evolved with the technologies of the internet. It now offers the possibility of designing style sheets. Links with databases have also been improved as well as the loading of files on the hosting servers. It also proposes the use of embedded models of web pages, in a proprietary format.

  •  Then click the HTML button at the top to create a new HTML page, you get the following window:

dreamweaver-cs6-code.png : Dreamweaver is published by Adobe Systems and is part of the Studio 8 development suite of the publisher, which includes Macromedia Flash, Macromedia Fireworks (graphic editing) and Macromedia Coldfusion (server). Macromedia, which previously published Dreamweaver, was acquired by Adobe in December 2005.

  • Then click the code tab at the top of the editor, delete the code that exists by default, and then type your own code.
  • To see your web page now just click on the Live tab at the top of the editor, your html page preview will be in the form:

dreamweaver-cs6-live.png : It is also possible to display and modify directly the code (HTML or other) that composes the page. It is very easy to switch from one display mode to another, or choose a mixed display.

 

Younes Derfoufi
CRMEF OUJDA

Post Views: 1 748
Acheter sur Très Facile !

Leave a Reply