1. Structure of a webpage
An HTML document (or web page) always begins with the start tag <!DOCTYPE html> and always ends with the end tag of the </html> element as follows:
Example1
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <head> <title>Document title</title> </head> <body> ...The HTML Page Content... </body> </html> |
- <!DOCTYPE html>: An element that essentially tells your computer that this is an HTML document. All other element tags are "nested" within the HTML start and end tags. The web page is further divided into two main sections which are the HEAD and BODY.
- <head> ... </head>: defines the header section that begins with the start tag <head> and ends with the end tag </head>. This section contains the document title, author information, meta tags used by search engines...
- <body> ... </body>: immediately after the header <head> and </head> comes the tags that define the body of the document <body> and </body> and just before the html end tag comes the end tag </body>.
2. Display a web page in the browser
As we have already mentioned, we need to use a web page editor to work with HTML language, then launch your VSCode IDE and follow these steps:
- Create a work folder name it for example: "workspace"
- Click on the File -> Open Folder menu and select your "workspace" folder:
- Then using the right button of the mouse, choose in the contextual menu, the submenu New File
- then give a name to your new document for example "index.html"
- Then add the code from example1 and save the changes using the File -> Save menu
- Then display your html page using the F5 key on the keyboard.
This gives you the preview of your web page:
3. Add a title to an HTML document
An HTML document (or web page) usually has a title that appears in the title bar that extends to the very top of the web page. This title is created using the <title>...</title> tags which are themselves always nested in the <head>...</head> tags. All text appearing between the <title> and </title> tags will be displayed as the title of your web page. So, the following HTML code generates a web page titled "My web page":
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <head> <title>My Web Page</title> </head> <body> ...The HTML Page Content... </body> </html> |
Here is the preview of your webpage:
Younes Derfoufi
CRMEF OUJDA
