December 20, 2019
Building basic websites using HTML and CSS
I started out learning basic introduction to HTML and CSS in order to start building basic websites. Here, I’m going to walkthrough the…
By Ashish Sharma
3 min read
I started out learning basic introduction to HTML and CSS in order to start building basic websites. Here, I'm going to walkthrough the concepts I learnt while building the website. Let's start with the what HTML and CSS actually are:
HTML: (Hyper Text Markup Language) marks up the raw content with an exact meaning and provide a simple structure to a website.
CSS: (Cascading Style Sheet) styles or format those marked up content.
Elements, Tags, and Attributes in HTML:
Elements are the basic building blocks in HTML. Examples of elements in HTML are p i.e paragraph, h1 i.e headings.
Tags are used for wrapping the element in < >. Tags are mostly in opening and closing pair together.
Attributes give the extra information to the elements and it always comes in the opening tag of the element. eg: . Here href is the attribute of the a i.e anchor element.
HTML Document Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Our first web page.</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Our first web page.</p>
</body>
</html>Head stores the information of the webpage like title of the page.
Main content of the webpage is contained in the body tag. Like headings and paragraphs are contained in the body tag.
And tags follow the rule of First In Last out. If opening tag comes first then its closing tag will be in the end.
Nesting and Indentation are important in the code to ensure the readability.
Now, let's see the basics of CSS used to style the components in the HTML document.
Selectors, Properties, and Values.
For targeting different elements present in the HTML document to style them we use different selectors such as Type, class and id selectors.
Type Selector: In this we target the elements directly by their type.
eg: h1{
font-size: 12px;
}
Here all the h1 elements present in the html document will be styled.
Class Selector: In this we target the elements using their defined classes in the html document. eg:
[HTML Document]
.p {
font-size :12px;
}
Here we defined p a class "ex". So in CSS we are targetting the elements wit the class "ex".
ID Selector: In this we target the elements using their defined id in the html document.
[HTML Document]
#p {
font-size :12px;
}
Here we defined p a id "ex". So in CSS we are targetting the elements with the id "ex".
Here in the CSS part font-size is the property and 12px is the value assigned to the property.
How to use CSS file alongwith HTML?
We need to reference CSS file in the HTML document by the link element wrapping it up in the Head tag.
Semantic vs Non-Semantic Tags
Semantic means using appropriate element tags for the appropriate content . This is helpful for the search engine optimization like identifying the tags which have more emphasis than the other tags.
Various Semantic tags include
Where as non-semantic tags that don't have a semantic meaning include
Block level elements and Inline level elements
Block level elements always start from a new line and take the fully available width.
,
Inline level elements are used to wrap the smaller pieces of content within them., , are the examples of inlne level elements.
Creating Hyperlinks
Hyperlinks are used to link to different pages from a index page and vice-versa. For this we use an anchor tag with href attribute i.e hyperlink reference.
There are two kind of paths given in the anchor tag. One is relative path and other is absolute path.
Relative path is the link to the other web pages of the same website. eg:
whereas Absolute path is the link to any other website. eg:
To open the link in a new window we use a attribute target="_blank" in the anchor tag. eg:
Adding a Mail me tag
For adding a mail me tag we use a attribute mailto: within the anchor tag.eg:
Clicking on mail me will open up the default e-mail client in the computer.
Adding a predefined subject and body in the mail me tag uses this syntax. eg:
Here %20 is used to add a space.
Linking to different parts of the web page
For linking to a part of the webpage with a link we need to add a id in the part where we want to link to. Then add that id in the attribute like this syntax. eg:
Hello this is a paragraph
Now in the anchor tag we add a link such as:
Building a basic website
Now by using the different tags we can set up the content on the webpage. And by using the semantic tags ensures the meaning to the content we entered in the webpage. Keeping in mind the structure of the website we can set up the different sematic tags at their appropriate locations.
Happy Coding :)