You will find out how producing you first web page is very gratifying
Step 1. Create a Folder
You require a dedicated Folder to hold your Web site files & sub folder(s) that you will produce on your own computer.
Folder Name
In this tutorial I will name the folder my-first-web-pages
I will keep referring to this name. If you wish to use use a name of your own choice make a note of it for future reference.
my-first-web-pages folder location
In this tutorial I want to place the my-first-web-pages folder in the following location: C: > Users > Your User Name>
Copy from this Tutorial the name of the folder you will create my-first-web-pages
In Windows Explorer browse to C: > Users >Your User Name>
Right Click your User Name, in my case it is Jon
In the drop down menu Mouse over New then select Folder
A New Folder will be highlighted Paste or Type in my-first-web-pages
The actual folder name & where you save it is up to you — What is essential is that you make a note of the folder name and where you save it, so that you can find it easily.
How to Create a Folder in Windows Video
The video shows you how to create the folder my-first-web-pages
Lesson 1. My First Web Page
Required HTML tags
All HTML5 web pages require the following code, in the form of HTML tags, which will work & produce a simple BLANK web page, that will validate as correct oncesome content is placed within the tag.
Your Page CONTENT goes here. The p tag indicates that this is a paragraph
When you start a new page in a web editor, the editor will usually create most of these lines of Source Code automatically.
To check this: Select the Source view / Code or similar named option in your editor and see the code produced. Note the code produced may vary slightly depending on the editor used.
Use the following code if you are using either Blue Griffon, Notebook or Dreamweaver or a web editor that can prepare HTML5
Click for specific instructions information & videos
for using these Web Editors
Look for Your Page TITLE goes here in the
top line of the window (Not in the Chrome browser)
& in the Tab
Then re-read the code & compare to the result.
Code Explanations
HTML Tags & HTML Elements
HTML Tags
In the above code you will see several letters or words within angle brackets <> such as &
These are HTML tags
Basically HTML tags are the markup code that imparts information to either the web browser or to search engines.
HTML tags are enclosed in a pair of less than and greater than brackets < >these brackets are known as the open delimiter and close delimiter respectively.
Although the Declaration is enclosed in < >brackets it is a Declaration & not a tag.
It is now recommended that tags are written in lower case letters
Most HTML tags, but not all, require both a
start tag e.g.
end tag,
Note how the end tag, is the same as the start tag, with the inclusion of a / before the tag name.
HTML has a few tags that do not have a end tag,
(Break, starts a new line)
(Image tag)
Tags are not displayed by the browser.
Examples of tags are:
tag defines a paragraph. This is the most frequently used tag.
defines a line break. Starts a new line
defines an image. Such as a photograph or graphic
Some tags are not supported by some browsers, some are supported differently, hence the different appearance of web pages in different browsers.
HTML Elements
All tags, except the have some content with them e.g.
These words within the P tag are content
An HTML tag + it’s content is known as an HTML Element.
!DOCTYPE Declaration Explanation
The declaration must be the very first thing in your HTML document, before the tag.
The declaration informs the web browser what type of document to expect
The declaration is not a tag, therefore it does not have an end tag.
HTML5 !DOCTYPE
HTML 4.01 !DOCTYPE
This is the declaration to the Web browser that this page (file) is an HTML 4.01 document
If you wish to use HTML 4.01 or to amend an HTML 4.01 file then see more information on http://www.w3schools.com/TAgs/tag_doctype.asp
In this article, we will show you how to create a homepage using HTML and CSS step by step. You can use this code as a starting point for your own website as a developer. Sample HTML code for homepage is also give.
Introduction
Every web developer should create a basic portfolio website using HTML and CSS. This will create a showcase of your work and will also help you learn basic concepts of HTML and CSS.
Start with something basic like this one and then add more to it in the future.
We are going to explain each step of the process in this article and also provide you sample HTML code of homepage.
Look and Feel
Here is how our homepage will look like.
Structure Of Homepage
Before we start, first have a look at the HTML components that create each section of this homepage.
The picture below shows different HTML elements with its name that gives you a rough idea of how to create the HTML structure of the home page.
The home page is divided into 3 sections: header, main and, footer .
The header section contains the logo and the navigation bar.
The main section contains the main content of the page like introduction, achievements, projects, etc.
The footer section contains the copyright, contact details, and social media links.
Step 1: Create a basic HTML page
Using the structure of the homepage explained above, create a basic HTML page.
The page is divided into 3 sections by HTML elements:
Header
The header section contains the logo which is nothing but just a link to the homepage here (you add your own logo image) and also contains the navigation bar.
Main
The main section contains almost everything that you want to show on the homepage so it is also bigger than any other section.
For simplicity, we are just using the intro, achievements, and about us section in this example.
From the image, you can get a rough idea of the structure of the main section.
A Web Developer
I am a web developer and I love to create websites.
About Me
I am a web developer and I love to create websites. I am a very good developer and I am always looking for new projects. I am a very good developer and I am always looking for new projects.
Main section code explained : The main section is divided into 3 sections: intro, achievements, and about me .
Intro — The intro section is a div element with a background image. The section contains a heading, a paragraph, and a button.
Achievements — The achievements section is another div element that uses font-awesome icons to display icons at the top of each section. The section contains 3 div elements each with a heading, a paragraph and, an icon.
About Me — The about me section has 2 inner elements one is text and another is an image.
Footer
The footer section contains the contact information and social media links.
Footer code explained : The footer section contains the contact information and social media links.
Copy — The copy section is a div element that contains copyright information.
Bottom Links — The bottom links section is a div element that contains the links to the other sections and social media information.
Step 2: Style The Elements Using CSS
We have created the HTML part now let’s style the elements using CSS.
To select the element to style use the CSS selectors.
We are going to use CSS flexbox to align the elements horizontally and vertically.
I am a web developer and I love to create websites.
About Me
I am a web developer and I love to create websites. I am a very good developer and I am always looking for new projects. I am a very good developer and I am always looking for new projects.
