Page 1

HTML & CSS Article By: Imran Khan Jaffar

Overview: 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. After Reading this Article your concept regarding HTML and CSS will be cleared in this article we will discuss all attributes and formatting of HTML and CSS.

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

Html Tags: HTML tags are basically keywords which is surrounded by angle brackets, like <html> and HTML tags are basically comes in pairs like <html> </html>, <Body> <.Body>.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 <hr> (used for horizontal line) these tags does not need any closing tags that’s why these tags are called empty tags.

HTML Editors: We can use different editors for Html below is few editors can be used for Coding. • Adobe Dreamweaver • Microsoft Expression • Notepad • Notepad++

HTML Page Structure Listing1: HTML Page structure [code> <Html> <Head> <title> any name here </title> </title> <Body> <h1>this a heading</h1> <p> this is a paragraph. </p> <p>This is another paragraph.</p> </body> HTML & CSS Article Written By: Imran Khan Jaffar E-mail: imran.buitems2012@yahoo.co.uk


</html> [/code]

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 defined Different attributes for paragraph and Heading, and these attributes will be defined after <Body> tag. While color we can defined inside the body like… Listing2: use of html heading and paragraph [code] <HTML> <Head> </head> <Body bgcolor=”red”> <font size="10" color="Blue"> <h2> this article is written By Imran Khan Jaffar</h2> </body> </html> [/code]

Figure Result of listing 2

HTML Tags Discuss in Detailed: We have below is Tags which we used in HTML. HTML & CSS Article Written By: Imran Khan Jaffar E-mail: imran.buitems2012@yahoo.co.uk


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

CODE: Listing3: HTML Tags [code] <Html> <Head> <TITLE> Article </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> [/code]

Figure Result of listing 3

HTML & CSS Article Written By: Imran Khan Jaffar E-mail: imran.buitems2012@yahoo.co.uk


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 below 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: How to add link & image in Html Listing4: How to add link in HTML [code] <Html> <Head> <title> buitems </title> </head> <Body> <a href="http://www.buitemsce.com ">your text here </a> [/code] s Listing5: How to Add image in HTML [code] <html> <head> <title> buitems </title> </head> <body> <img src="image name .Extension" width="200" height="220" border="5"> </body> </html> </body> </html> [/code]  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: unordered list and ordered list Listing6: Ordered and unordered list in HTML [code] <html> <head> HTML & CSS Article Written By: Imran Khan Jaffar E-mail: imran.buitems2012@yahoo.co.uk


<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>Shaid Afridi</li><li>Imran Nazeer</li><li>Saeed Ajmal</li></ol> </body> </html [/code]

Figure Result of listing 6

MARQUEE TAG: We can make the text/images scroll from right to left, left to right, top to bottom, or bottom to top - it's your choice!. Marquee tag is define as <marquee> you can use attributes here to slow down the movement and change the direction etc here </marquee>.

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â&#x20AC;?s there and then we will make relation with HTML in another file. Letâ&#x20AC;&#x2122;s do it practically.

HTML & CSS Article Written By: Imran Khan Jaffar E-mail: imran.buitems2012@yahoo.co.uk


Listing7: Relation in CSS [code] 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; } [/code] . Here we just used three classes here and also we had define different attributes with each of them now we will make a relation with HTML using a different tag .one thing more 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 case cading style sheet. For designing we use CSS.we can use CSS for three ways,  External  Internal  Inline

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

Internal HTML & CSS Article Written By: Imran Khan Jaffar E-mail: imran.buitems2012@yahoo.co.uk


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 designed and formatting our each of 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 <style> 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,

Listing8: ID’s in CSS [code] <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> [/code]

Figure Result of Listing: 8

HTML & CSS Article Written By: Imran Khan Jaffar E-mail: imran.buitems2012@yahoo.co.uk


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.

Listing9: Classes in CSS [code] <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 Writtern By Imran khan jaffar <h1> <h2 class="buitemsce"> This is heading two </h2> </body> </html> [/code]

Figure 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 HTML & CSS Article Written By: Imran Khan Jaffar E-mail: imran.buitems2012@yahoo.co.uk


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â&#x20AC;&#x2122;s do it practically. Listing10: Advance Links [code] <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>&nbsp;&nbsp;<br> <a href="http://www.google.com"> Visit Google </a>&nbsp;&nbsp;<br> <a href="http://www.facebook.com"> Visit facebook </a>&nbsp;&nbsp; </body></center> </html> [/code]

Figure 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â&#x20AC;&#x2122;s Do is practically. Listing11: CSS Borders HTML & CSS Article Written By: Imran Khan Jaffar E-mail: imran.buitems2012@yahoo.co.uk


[code] <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> [/code]

Figure Result of Listing 11

Custom Shapes: HTML & CSS Article Written By: Imran Khan Jaffar E-mail: imran.buitems2012@yahoo.co.uk


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â&#x20AC;&#x2122;s shape. So lets do it practically. Listing12: Custom Shapes [code] <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> [/code]

Figure 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. THE END HTML & CSS Article Written By: Imran Khan Jaffar E-mail: imran.buitems2012@yahoo.co.uk


HTML & CSS Article Written By: Imran Khan Jaffar E-mail: imran.buitems2012@yahoo.co.uk

Html and css  

My This Articles is about #HTML (Hyper Text Mark Up Language) and CSS (case cading Style Sheet) in this article i defined and discussed diff...

Read more
Read more
Similar to
Popular now
Just for you