Ok… since this website will also be for beginners, I decided to start
my first post with a simple HTML (Hyper Text Markup Language) structure
for those who want to learn web programming from zero.
An HTML structure is like a Russian babushka or nesting doll, you can
also see it as a big box that contains lots of little boxes in a
specific order, but don’t worry, for a basic structure we will start off
with only a couple of boxes so it doesn’t get complicated.
We are going to start off by opening a basic text editing program like “Notepad” or a rich text editor like
Komodo Edit and saving a file with a html extension (Example: mynewsite.html).
1.- First of all we are going to start by adding the HTML <!DOCTYPE> Declaration. This is just an instruction to the web browser about what version of the markup language the page is written in
2.- Now we’re going to add the tag that’s going to contain all other
tags on our website, our tag. This tag tells the browser that this is an
HTML document. This is the outermost or root element in HTML documents
We start of by opening our HTML tag like this:
Then we close it like this:
This is our HTML code so far:
For more information on the use of the <html> tag visit w3schools HTML
3.- Our next step is to add the <HEAD>
tag inside our <HTML> tag. This tag is a container for all the
head elements. Elements inside HEAD can include page title, scripts,
instruct the browser where to find style sheets, provide meta
information, and more
We are going to open and close the HEAD tag inside the HTML tag like this:
For more information on the use of the <head> tag visit w3schools HEAD
4.- Next we’ll add a <META /> tag
to our HTML head. This tag is typically used to specify page
description, keywords, author of the document, last modified and other
metadata
We’ll add the meta tag inside the head tag like this:
2 | <meta name="" content="" /> |
Meta tags are self-closing, this means that
we won’t use an open and closing tag separately, instead we’ll use the
“/” before the “>”. For more information on the full use of the
<META /> tag visit w3schools META
5.- We’ll continue by adding a title to our page by adding the <TITLE> tag which defines the title of the document to be displayed on the browser, search engines and more.
The TITLE tag will simply be added inside the HEAD tag. The TITLE tag will enclose your document title like this:
2 | <title>My New Website</title> |
Now that we’ve included the TITLE tag inside the HTML, our HTML code looks like this:
4 | <meta name="" content="" /> |
5 | <title>My New Website</title> |
6.- Now comes the good part, the <BODY> tag, this tag will contain all the images, links, information and other elements to be displayed on your website
The BODY tag will be used inside the HTML right after we end the HEAD tag like this:
For more information on the full use of the <body> tag visit w3schools BODY
7.- Now we are going to build a basic display area for our website by
dividing it into 3 main page sections (Header, Main Content &
Fotter), for this we are going to use the <DIV> tag (division tag) to group elements on each section.
This time we are going to create 3 DIV tags inside the BODY and we’re
going to give them an ID (identifying) attribute to make them unique
like this:
5 | <div id="main_content"> |
Now that we’ve divided our main page into 3 sections, our HTML code looks like this:
4 | <meta name="" content="" /> |
5 | <title>My New Website</title> |
11 | <div id="main_content"> |
ليست هناك تعليقات:
إرسال تعليق