Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Understanding HTML and CSS

In this article we will discuss about Html & CSS and also we will discuss about the relation of CSS and how to embed CSS in HTML.

Html Stands for Hyper Text Markup Language. HTML documents contain HTML tags and plain text. Html is a markup language and the tags describe document content. To create websites and WebPages we use Html.Html is not a case sensitive language you can use either small alphabets or Capitals letters whatever you want.

Html Tags:

HTML tags are basically keywords which is surrounded by angle brackets, like and HTML tags are basically comes in pairs like , first tag is called opening or starting tag while the second tag is Closing or ending tag.

Html Elements:

Some of Tags used in HTML have no content and have no closing tags. These tags are called Empty tags. Like<br>(Used for line break) and (used for horizontal line). These tags do not need any closing tag that is why these tags are called empty tags.

HTML Editors:

We can use different editors for Html. Below is few editors which can be used for Coding.
  • Adobe Dreamweaver
  • Microsoft Expression
  • Notepad
  • Notepad++

HTML Page Structure

Listing 1: HTML Page structure

<Html>

<head><title> any name here </title></head>

<body>

<h1>this a heading</h1>
<p> this is a paragraph. </p>
<p>This is another paragraph.</p>
</body>
</html>

HTML Attributes:

Html Attributes can define the additional information about Elements. And These Attributes come in name/value pairs like: name="value" like we can add Link, image, Audio/Video in HTML via using different tags. And we can also Create ID and Class for defining the formatting and to gave different attributes each of paragraph tags and heading tags and etc.

HTML Heading & Paragraph

For paragraph we use <p> your paragraph </p> and for heading we have heading starts from <h1> to <h6> including closing tags. And we can also define different attributes for paragraph and Heading, and these attributes will be defined after <body> tag. While color, we can define it inside the body like.

Listing 2: use of html heading and paragraph

<HTML>
<head><title> any name here </title>
</head>
<Body bgcolor=”red”>
<font size="10" color="Blue">
<h2> this article is written By Imran Khan Jaffar</h2>
</body>
</html>
Result of listing 2

Figure 1: Result of listing 2

HTML Tags discussed in details:

We have the following Tags which we used in HTML.

For Bold, italic, underline, Sup, sub and Strong, Big text we use different of attributes lets discuss them practically with coding.

Listing 3: HTML Tags

<html>
<head>
<TITLE> Article title here </TITLE>
</head>
<Body>
Welcome to My Article! </p><br>
<h1>this is my Heading One</h1><br>
<h2>this is my Heading Two</h2><br>
<h3>this is my Heading Three</h3>
<b>this is Bold</b><br>
<i>this is italic</i><br>
<u>this is Underline<u><br>
<Strong>this is Strong</strong><br>
<Big>this is Big text</big>
<p><sup>This is</sup> My Article <sup>Abut Html and CSS </sup> which will clearly define <sup>each and every thing </sup>about HTML & CSSS</P>
<h3><sub>This is</sub> My Article <sub>Abut Html and CSS </sub> which will clearly define <sub>each and every thing </sub>about HTML & CSSS</h3>
</body>
</html>
Result of listing 3

Figure 2: Result of listing 3

How to add link & Image in HTML?

It is very simple to add link and image in HTML for this we can use different tags to add link and image, for image we can use <img src="image name. Extension" width="200" height="220" border="5"> While in a single tag we can use different attributes like here width, height, and border this comes in attributes.

For link we can use the tag: <a href="http://www.buitemsce.com"> you can write Text here </a>

While we can also use different attributes for this tag as well. Let’s do it practically.

Listing 4: How to add link in HTML

<html>
<head>
<title>buitems</title>
</head>
<body>
<a href="http://www.buitemsce.com ">your text here </a>
</body>
</html>

Listing 5: How to Add image in HTML

<html>
<head>
<title>buitems</title>
</head>
<body>
<img src="image name .Extension" width="200" height="220" border="5">
</body>
</html>
</body>
</html>

Unordered List

Unordered list is define by <ul> tag basically we use for special symbols for our Webpage like, ●.

Ordered List

Ordered list also same but the difference is in ordered list we use <ol> Tag and ordered list is used for numbering like 1, 2, 3 for our webpage and websites let’s do it practically.

Listing 6: Ordered and unordered list in HTML

<html>
<head>
<TITLE> HTML &CSS  Articles</TITLE>
</head>
<body bgcolor = "#fff000">
Unordered List
<ul>
<li>Buitems</li>
<li>Computer</li>
<li>Engineering</li>
<ul>
Ordered List
<ol>
<li>ShaidAfridi</li>
<li>Imran Nazeer</li>
<li>SaeedAjmal</li>
</ol>
</body>
</html
Result of listing 6

Figure 3 : Result of listing 6

How to make relation in CSS and Embed in HTML?

You can use different txt file and write our code there , and on that file no need to use HTML blocks because we just use attributes and tags there and we can create classes and ID”s there and then we will make relation with HTML in another file. Let’s do it practically.

Listing 7: Relation in CSS

<style>
body{
	background-image:url(download.jpg);
}
.contain {
	width: 900px;
}
.header {
	background-image: url(Header.jpg);
	height: 100px;
	width: 900px;
	border-bottom-style: solid;
	border-bottom-color: #C0C;
	position: relative;
}
.navbar {
	background-color: #009;
	background-image: url(navigation.jpg);
	height: 40px;
	width: 900px;
	position: relative;
}
</style>
.

Here we just used three classes and also we had defined different attributes with each of them. Now we will make a relation with HTML using a different tag .One more thing I want to tell you here that you can save this file with any name but extension shout be .css like name.CSS.

<link rel="stylesheet" type="text/css" href="name.css"/>

This tag is used to make relation CSS with HTML

CSS Overview:

CSS Is Stands for cascading style sheet. For designing us use CSS.we can use CSS for three ways:

  • External
  • Internal
  • Inline

External

Let me tell you one thing that you saw many websites, in single websites there would be multiple pages and if we want to give separate and different designed for each page then for this purpose we use CSS Externally.

Internal

Internal CSS basically used in blogging sites, like word press, BlogSpot, that in blogging sites we have same color of menus so that are basically due to internal CSS.

Inline

As it is mentioned by name inline that we can design and format each line in paragraph differently, so for this purpose we use Inline CSS.

CSS Tags

We can define CSS Style in the mid of closing and opening tag of and we can use different attributes regarding text , images, links and font size, color here.

ID”S:

The id selector is used to specify a style for a single, unique element.The id selector uses the id attribute of the HTML element, and is defined with”#".Lets”s do it practically,

Listing 8: ID’s in CSS

<html>
<head><title>Margin</title>
<style type="text/css">
#pakistan{color:red; text-decoration:line-through;font-size:2em;}
#Quetta{color:blue; background-color:yellow;font-size:2em; padding:5px; margin:5px;}
</style>
</head>
<body>
<p id='pakistan'>This is a simple paragraph</p>
<p>This is another paragraph<p>
<h1 id='Quetta'>This is heading one<h1>
<div id='pakistan'>This is Div tag</div>
</body>
</html>
Result of Listing: 8

Figure 4: Result of Listing: 8

CLASSES:

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "."Lets do it practically.

Listing 9: Classes in CSS

<html>
<head><title>Margin</title>
<style type="text/css">
.buitemsce{color:pink; font-size:2em; padding:0; background-color:green}
p.buitemsce{color:yellow; background-color:blue; font-size:2em;
text-shadow: 5px 5px orange;}
h1.buitemsce{color:red; background-color:pink; font-size:3em;}
h2.buitemsce{color:red; background-color:pink; font-size:3em;}
</style>
</head>
<body>
<p class="buitemsce"> This Article is about HTML & CSS </p>
<h1 class="buitemsce"> This Article is WritternBy Imran khan jaffar<h1>
<h2 class="buitemsce">This is heading two </h2>
</body>
</html>
 Result of Listing: 9

Figure 5: Result of Listing: 9

Advance Links:

In CSS we can use link slightly different from HTML as well with these links we can use different attributes with these link. Like we can use the text decoration in CSS which is not possible in HTML as well havor we use in CSS which is also not possible in HTML, Hover is actually the behavior of Link like when you will move your cursor towards the cursor the behavior of links would be changed this is due to hover. So let’s do it practically.

Listing 10: Advance Links

<html>
<head><title>LINKS</title>
<style type="text/css">
a:link {
display:block;
width:130;
background-color:orange;
color:green;
padding:5px;
text-align:center;
text-decoration:none;
}
a:hover{
background-color:black;
color:white;
}

</style>
</head>
<body>
<center><a href="http://www.buitemsce.com"> Visit Buitemsce</a>  <br>
<a href="http://www.google.com"> Visit Google </a>  <br>
<a href="http://www.facebook.com"> Visit facebook</a>  

</body></center>
</html>
Result of listing 10

Figure 6: Result of Listing: 10

CSS Borders:

We can use different types of borders in CSS and we can write texts and can use that border around that text and we can designed them by our own choice and can changed the corners as well. Let’s Do is practically.

Listing 11: CSS Borders

<html>
<head><title>CSS Rounded boarder</title>
<style type="text/CSS">
#border{
border:10px solid green;
border-radius:50px 10px 50px 10px;
-MOZ-border-radius:50px 10px 50px 10px;
-WEBKIT-border-radius:80px 30px 80px 30px;
margin-left:10%;
margin-top:10%;
margin-right:10%;
padding:20px;
}
</style>

</head>

<body>

<div id ="border">
I am web developer and web designer from karachi, pakistanI am web developer and web designer from karachi,
pakistanI am web developer and web designer from karachi, pakistan
I am web developer and web designer from karachi, pakistan
I am web developer and web designer from karachi, pakistan
I am web developer and web designer from karachi, pakistan
I am web developer and web designer from karachi, pakistan
I am web developer and web designer from karachi, pakistan
</div>


</body>
</html>
Result of Listing 11

Figure 7: Result of Listing 11

Custom Shapes:

We can make different type of shapes circles in our webpage and websites also we can add any text, image, audio/video and links on that’s shape. So lets do it practically.

Listing 12: Custom Shapes

<html>
<head><title>Custum Shapes</title>
<style type="text/CSS">
.box{
width:200px;
height:220px;
background:blue;
border:100px solid blue;
border-radius:200px;
}
</style>
</head>
<body>
<center><div class ='box'>
This is circle shape
</div></center>
</body>
</html>
Result of Listing: 12

Figure 8: Result of Listing: 12

Conclusion

In this Articles we had discussed about HTML and CSS and almost we had discussed all important tags of HTML & CSS also we did all of them with practically coding and instead of this we also make a relation of CSS and embed it with HTML, now using all of the tags in HTML and CSS we had discuss, now you will be able to create and designed a webpage using all of the above attributes and tags which we discussed.



Software developer from Karachi, Pakistan. Freelancer writer for web developent and web design.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login