The fundamentals of web design
P 4
Learn HTML & CSS
The author's main goal in this tutorial is to teach HTML and CSS in a limited number of tutorials. You can use these codes in your HTML editor, such as Notepad++, Sublime, and others. We'll use numbers to represent codes in this case. We'll go over how to write code to execute in an editor for various purposes. One of the advantages is that you will quickly learn to code in HTML and CSS.
<html>
<head>
<title> My first webpage </title>
</head>
<body>
<p> Body part will appear here </p>
</body>
</html>
A basic HTML webpage is shown in the code above. Tags include items like <head>, <body>, etc. This is how a webpage's skeleton is built. We'll go through a lot of different tags and how they work.
Instruction: Copy code and then paste into your HTML editor, then run it.
Some frequently used HTML tags
<p>: It
is used for paragraph
<h1>: for
major heading
<h6>: for
minor heading. We use h1, h2, h3, h4, h5, h6 – all tags for heading. If we
arrange this tags as per their font size that it will be
h1>h2>h3>h4>h5>h6.
HTML Element: Let
me give an example. Here <p> is
an HTML tag but we use it to write paragraph. For example, <p> Hello World! </p>. Using this we’ll be able to write
our paragraph. Now, <p> is
called HTML tag and <p> Hello
World! </p> is called HTML element.
<title>: To
represent title of a webpage that is shown at the top of a browser, like,
welcome, home, etc.
<div>: It
is used for ‘division’. In HTML webpages we frequently need it to divide
webpage in several divisions. One important thing is that we can apply
different types of colours, styles, fonts, etc. to different divisions. For
example, we keep background color of ‘division A’ is red & for ‘division B’
we keep it blue.
<id>: ‘id’
means identity. Here is HTML webpage we assign id to a particular HTML element
so that we can find it easily or we can show it in a webpage very easily.
Remember that id of an element will be unique.
Example:
<html>
<body>
<p>
I am learning to code in HTML </p>
<h1>
HTML & CSS </h1>
<h2>
HTML & CSS </h2>
<h3>
HTML & CSS </h3>
<h4>
HTML & CSS </h4>
<h5>
HTML & CSS </h5>
<h6>
HTML & CSS </h6>
</body>
</html>
Instruction: copy the code and paste into HTML editor. Then run it. You'll see difference of font sizes among different HTML tags.
Result:
Example of '<div>' tag:
Result:
Here, in the above code & result we've shown how '<div>' tag works. There are two divisions, division A & division B. We can write our own topic under different divisions. At the left top corner, 'HTML & CSS' is the title of the page. It may be something like, Welcome, Contact Us, etc. '<title>' tag is used to add tittle to a webpage.
Example of '<id>' tag:
<html>
<body>
<div id="first">
<h1> This is first division of my webpage </h1>
<p> "Id" stands for identity. In school, colleges, all students should have their id card. Similarly, in a document we can put a id to a particular section so that we can find easily later. For that id of a section or division must be unique. In case of HTML pages we use id for different HTML elements, divisions, or sections, so that we can find it easily in hundreds of words. </p>
</div>
<div id="second">
<h1> This is second division of my webpage </h2>
<p> In a division you can write your content. You can write heading or subheading first. Then, you can discuss your topics on webpage, etc. </p>
</div>
</body>
<style>
#first {
background-color: yellow;
}
#second {
background-color: grey;
}
</style>
</html>
Result
In the above code division 1 is assigned with id "first". Then we apply color to the division calling its id. We've used '<style>' tag to add style to the 'id' (indirectly, to add style to the division because we've assigned id to the division. As, we've talk about it that id is helpful to find HTML elements, Divisions, etc. in a webpage. For, example if there is a id in a webpage named "first" and we want to show it at the top of our webpage we simply type "www.example.com#first" to our browser then element or division or section with id "first" will appear top at the webpage.
HTML class:
For all programming languages i.e., for java, class is an important thing. In case of programming languages class is prototype, where so many objects comes under a class. and we can use each object independently. For, example we can say "car" is a class, then set of cars, like, "BMW", "Volvo", etc. will be object. Hope you have understood the concept.
In HTML we can also use classes. One popular example of Class in HTML is "footer".
Example:
<html>
<body style="background-color: #bbb; height: 500px; width: 200px;">
<p>Body part will appear here</p>
</body>
<div class="footer">
<p>You can use different columns for footer portion. You must see "about us", "contact us", etc. such types of columns in most of the webpages</p><br><br>
<p style="align: center;"> Copyright@ Your Website 2021. All Rights reserved</p>
</div>
</html>
Here in the above code we've used class "footer". Now whatever you write on your webpage footer portion always comes at bottom line of webpage and it must be visible irrespective of your content size. Now we can add different columns under class "footer". For your knowledge if you do not use footer then the portion may not be visible at the exactly bottom of the webpage if content is large in size. Here we've talk only about class "footer" but the may be other classes like, dropdown, etc.
CSS Tutorial
CSS stands for 'Cascading Style Sheets'. While HTML prepares skeleton of HTML webpage, CSS give us proper presentation about a webpage. Using CSS we can add font-style, font-size, text-color, background-color, background-image, etc. Let me give some simple examples of CSS below:
CSS code for changing style, font-size, color of text
<html>
<head>
<title>CSS Tutorial</title>
</head>
<body>
<div>
<p>Body part will appear here.</p>
<p>In this tutorial you'll learn how to add style, i.e., color, font-size, color, text-alignment, button-style, etc. to a webpage. For effective learning copy and paste the code in your HTML editor. And run the code and see the result.</p>
</div>
</body>
<style>
p {
font-family: sans-serif;
font-style: italic;
font-size: 15px;
color: red;
}
</style>
</html>
Result
After running the HTML code on browser you can see text color is red and it is in italic style as we have applied in CSS code here. We can also control the font size as shown in code. To add CSS style to a HTML webpage we write CSS code inside <style></style> tags. In this tutorial or in previous tutorial you must have noticed that every tags has a closing tag, like, if we write <p> tag, then we must close it by </p> tag. Similar, examples are <head></head>, <body></body>, <div></div>, etc. But there are also exceptional cases, like, <br> tag used for break the line, <hr> for drawing horizontal line in webpage.
CSS code for changing background-color of a webpage:
Changing background-color is related to the changing background-color of 'body' portion of a webpage.
<html>
<body>
<h1>Body part will appear here</h1>
</body>
<style>
body {
background-color: #ddd;
}
</style>
</html>
Result:
Alignment of Text using CSS
<html>
<body>
<h1 align = "center" style=" font-size: 25px;">Title of the topic will appear here!<h1>
<p align = "justify" style = "font-size: 20px;">Content of the topic is here. Here, in this tutorial author's main aim is to teach you CSS in less number tutorials. It will be very helpful for you to learn CSS very quickly. You can build an static webpage using HTML and CSS only. But to add dynamic view to your website you must have to learn JavaScript.</p>
</body>
<html>
Result
In the result you see we've aligned the title of the topic above in the middle of the webpage by using align="center" in <h1> tag. Similarly, if we write the code inside <p> tag then the text written under <p> tag will be central aligned but in the above code we've chosen the alignment of <p> tag as "justify". Alternatively, we can choose "Left" or "Right" alignment as well. You should try it in your own end. You must have noticed some different style of writing CSS code instead of writing <style></style> tag. In the above we have written CSS code for <h1> and <p> tags just inside it in such a way, like, <p style= "font-size: 20px;">. If you look at the first code on the page, you'll notice that there's a different way of writing CSS code for styling tag, for example,
<style>
p {
font-family: sans-serif;
font-style: italic;
font-size: 15px;
color: red;
}
</style>
Both are correct.