How to make a web page with HTML and CSS
(Introduction for beginners)
Do you want to create your own web page?
Yes, you can. If you learn HTML and CSS, you can make your own web page.
I will teach you very basic of HTML and CSS.
First, what is HTML?
HTML stands for Hyper Text Markup Language. You must be careful that HTML is NOT Programming language.
HTML is the standard markup language for creating Web page. HTML describes the structure of a Web page.
HTML consists of a series of elements and which tell the browser how to display the content.
HTML elements label pieces of content such as “this is a heading”, “this is a paragraph” , “this is a link”, etc.
How about CSS?
CSS stands for Cascading Style Sheets.
CSS is also NOT Programming language as well.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once. External Stylesheets are stored in CSS files.
If you think about a person, HTML is a kind role of skeletal structure or frame. On the other hand, CSS is a kind role of styling the person, for a color of hair, length of hair, a color of eyes, body type (slim, athletic, curvy, chubby etc).
OK, let’s make a web page with HTML and CSS!
Before making the web page, you’ll need the browser, such as a google Chrome, Firefox, safari, or Windows Edge.
And you will also need the text editor, such as Visual Studio Code (VS Code) or Sublime Text.
First, let’s create HTML file first.
Open your preference text editor, please create a new HTML file.
When you create new HTML file on your text editor, please save as “index.html” .
Don’t forget the extension is “.html”.
In the blank page, please type the following;
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
When you typed the above, let’s save it now and open index.html file.
You can double click of “index.html” file or right click and open with your preference web browser.
You will see like this.
Let me just explain each elements of the above which you typed.
<!DOCTYPE html> the declaration that this is HTML5 document
<html> This element is the root element of an HTML page
<head> This element contains meta information about the HTML page
<title>Page Title</title> This element specifies a tile for the HTML page which is shown in the browser’s title bar or in the page’s tab.
</head> Closing “<head>”element. Until here, contains meta information.
<body> This element defines the document’s body, and is container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<h1>My First Heading</h1> This element defines a large heading.
<p>My first paragraph.</p> This element defines a paragraph.
</body>Closing ”<body>”. The contents will be visible until here.
</html>Closing ”<html>” This is HTML document until here.
Now, let’s add <h2> to <h6> elements between <h1> and <p> as below.
<body>
<h1>My First Heading</h1>
<h2>My Second Heading</h2>
<h3>My Third Heading</h3>
<h4>My Forth Heading</h4>
<h5>My Fifth Heading</h5>
<h6>My Sixth Heading</h6>
<p>My first paragraph.</p>
</body>
Then, save the index.html file and refresh the browser again.
You will see like this.
Did you notice? If you increase number after <h> the text get smaller.
<h1> to <h6> tags define HTML heading.
<h1> defines the most important heading. <h6> defines the least important heading.
Next, let’s add link!
Please add the below after <p>My first paragraph.</p>
<a href=”https://www.google.com/">Google</a>
Save the index.html, and refresh the browser, you will see this.
Place the cursor on the “Google” and click it. You can jump to the webpage of Google. Now you could add the link of Google.
If you want to add image, you use <img>tag.
Please type the below, after “Google” on your index.html.
<img src=”https://source.unsplash.com/random">
You don’t have to use </img>, for closing image tag.
Save the index.html file, and refresh it. You will see the image on your web page.
Now you could add the image as well!
Let’s move CSS part.
First, create a new file “style.css” , on the same directory with “index.html”.
Before starting editing “style.css” file, please add the link on “index.html” file between <head> and <title> elements as below.
<head>
<link rel=”stylesheet” href=”./style.css”>
<title>Page Title</title>
It means that “index.html” files refers to “style.css” file. Now if you edit “style.css”, it will reflect your web page.
Let’s start editing CSS file.
On your “style.css” file, please type as below.
body{
background-color: pink;
}
Then save “style.css” and “index.html” files and refresh your web page.
Now you can see the webpage background color has been changed to pink!
Next, let’s change the text style.
Please type the below after the body parts.
h1{
color: red;
}
h2{
color:blue;
text-align: center;
}
h3{
font-family:sans-serif;
}
You will see like this;
Now you can change the text color, font style and its position as well!
You can also change the size of images.
Type the following after the <h3> part.
img{
width: 500px;
height: auto;
}
Then save the file and refresh the web page.
See? You can also change the image size!
I just teach you only the introduction of HTML and CSS.
HTML and CSS are very profound, and it will take a time to master of them.
But, if you learn HTML and CSS more, you can create your own web page as you like freely.
