HTML & CSS : A Tutorial

HTML & CSS :A Tutorial Prepared By:Hany RizkBernard Abdel Karim

What is an HTML File? • HTML stands for Hyper Text Markup Language • An HTML file is a text file containing small markup tags • The markup tags tell the Web browser how to display the page • An HTML file must have an htm or html file extension • An HTML file can be created using a simple text editor

Words to Know • Element - A complete tag, having an opening <tag> and a closing </tag>. • Tag - Used to specify ("mark-up") regions of HTML documents for the web browser to interpret. Tags look like this: <tag> • Attribute - Used to modify the value of the HTML element. Elements will often have multiple attributes. • For now just know that a tag is a command the web browser interprets, an element is a complete tag, and an attribute customizes or modifies HTML elements.

Division • An HTML document is usually composed of 2 main parts: • The Head: It includes data such as the title, which is the name of the website, and meta data, which define the content of the website, and thus eases the job of search engines. Everything in the head will not be displayed. • The Body: It includes all the text, images and information to be displayed.

If you are running Windows, start Notepad. Type in the following text: <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body></html> Then open IE or whatever browser you have. Click on “File”, “open”. Browse the file you have just created then open it. There you go. Do You Want to Try It?

Example Explained • The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. • The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. • The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. • The text between the <body> tags is the text that will be displayed in your browser. • The text between the <b> and </b> tags will be displayed in a bold font.

But there are cases where tags don’t have to be closed, for example when we insert an image, or when we want a line break. • HTML Code: <img src="../mypic.jpg" /> -- Image Tag <br /> -- Line Break Tag <input type="text" size="12" /> -- Input Field • Display:

Basic HTML Tags <html>Defines an HTML document <body>Defines the document's body <h1> to <h6>Defines header 1 to header 6 <p>Defines a paragraph <br>Inserts a single line break <hr>Defines a horizontal rule <!-->Defines a comment

Paragraph Tag <p> Publishing any kind of written works requires the use of a paragraph. The paragraph tag is very basic and a great introductory tag for beginner's because of its simplicity. HTML Code: <p align="center">For instance, let's say you had a HUGE school or work...</p>

HEADINGS IN HTML • A heading in HTML is a title or subtitle. By placing text inside heading tags, the text is displayed in bold, and its size depends on the number of the heading (1-6), with 1 being the largest heading and 6 being the smallest. • HTML Code: <body> <h1>Headings</h1> <h2>are</h2> <h3>great</h3> <h4>for</h4> <h5>titles</h5> <h6>and subtitles</h6> </body>

Line Breaking For skipping a line, using the tag <br> HTML Code: <p>Sincerely,<br /><br /><br />Kevin Sanders<br />Vice President</p> Sincerely,Kevin SandersVice President

HTML Attributes Attributes are used to amplify tags. When a web browser interprets a tag, it will also search for set attributes and then display the element (tags+attributes) in its entirety. At some point you may want to give your body element a background color or perhaps change the width of a table. All of these things and more can be achieved using Attributes. Attributes are placed within the opening tag and they follow a precise syntax (format).

The ID attribute The idea is that you can classify or id certain a tag and later format the tag using Cascading Style Sheets. It becomes necessary when you have two or more of the same element on a page (like a <p> tag) but want them to be different in appearance. HTML Code: <p id="italicsparagraph">Paragraph type 1 Italics</p><p id="boldparagraph">Paragraph type 2 Bold</p>

The Name attribute Name is much different than id. By allotting a name to an element, that name becomes a scripting variable for scripting languages such as Javascript, ASP, and PHP. The name attribute is seen most often with forms and other user-input elements. HTML Code: <input type="text" name="TextField" />

The Title Attribute • This attribute titles an element and adds a tiny text pop-up to any HTML element. Much like the text pop-ups of word processing programs, these attributes should not be forgotten. You may title an element anything you would like, the effects of this attribute are not seen until you hover your mouse over the element for a few seconds. HTML Code: <h2 title="Hello There!">Titled Heading Tag</h2> • Hover your mouse over the display heading to see the magic of the title attribute! This provides your web site with some user interaction which is priceless.

The Align Attribute If you wish to change the horizontal location of your elements you may do so using the align attribute. You may align things left, right, or center. By default most elements are automatically aligned left unless otherwise specified. HTML Code: <h2 align="left">Left aligned heading</h2><h2 align="center">Centered Heading</h2><h2 align="right">Right aligned heading</h2>

Lists There are different types of lists. A <ol> tag starts an ordered list, and <ul> for unordered lists Use the type and start attributes to fine tune your lists accordingly. <ul> - unordered lists , bullets <ol> - ordered lists , numbers and letters

Ordered Lists Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol> and closing </ol> tags to create list items. Ordered simply means numbered. HTML Code: <h4 >Goals</h4> Goals <ol><li>Find a Job</li> 1. Find a Job <li>Get Money</li> 2. Get Money <li>Move Out</li> 3. Move out</ol>

If you need to start your ordered list on any number besides 1, you use the start attribute. <h4 align="center">Goals</h4><ol start="4" ><li>Buy Food</li><li>Enroll in College</li><li>Get a Degree</li></ol>Goals4. Buy Food5. Enroll in college6. Get a Degree

There are 4 other types of ordered lists. Instead of generic numbers you can replace them with Roman numerals or letters, both capital and lower-case. Use the type attribute to change the numbering. HTML Code: <ol type="a"><ol type="A"><ol type="i"><ol type="I">

Unordered Lists <h4 align="center">Shopping List</h4><ul><li>Milk</li><li>Toilet Paper</li><li>Cereal</li><li>Bread</li></ul> Other types of bullets: <ul type="square"><ul type="disc"><ul type="circle">

Bold, Italic and More HTML Code: <p>An example of <b>Bold Text</b></p><p>An example of <strong>Strong Text</strong></p><p>An example of <i>Italic Text</i></p> HTML Formatting: An example of Bold TextAn example of Strong TextAn example of Italic Text

Color Coding There are 3 different methods to set color. The simplest being the Generic terms of colors. Examples: black, white, red, green, and blue. RGB Values: Each can have a value from 0 (none of that color) to 255 (fully that color). Below is an example of RGB in use. bgcolor="rgb(255,255,255)“ ---- WHITE bgcolor="rgb(255,0,0)” --- Red bgcolor="rgb(0,255,0)“ --- Green bgcolor="rgb(0,0,255)“ --- Blue Hexadecimal: A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB). Here's a sample hexadecimal : bgcolor="#RRGGBB"

Hypertext Reference (href) • The href attribute defines reference that the link refers to. Basically this is where the users will be taken if they wish to click this link. • Hypertext references can be: • Internal (Links to anchors on the current page) • Local (Links to other pages within your domain ) • Global (Links to other domains outside of your site) • Internal - href="#anchorname“ • Local - href="../pics/picturefile.jpg“ • Global - href="http://www.tizag.com/"

Text Links You must use the <a></a> tags to define the start and ending of an anchor. Decide what type of href attribute you need and place this attribute into the opening tag. The text you place between the opening and closing tags will be shown as the link on a page. <a href="http://www.tizag.com/" target="_blank" >Tizag Home</a><a href="http://www.espn.com/" target="_blank" >ESPN Home</a><a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a> Tizag HomeESPN HomeYahoo Home

Anchors To link two sections of your existing page a name must be given to the anchor. Anchors: <h2>HTML Links and Anchors<a name="top"></a></h2> <h2>HTML Text Links<a name="text"></a></h2> Anchor Code: <a href="#top">Go to the Top</a> <a href="#text">Learn about Text Links</a>

Character Entities Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source. A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the character entity.

The Most Common Character Entities

Images <imgsrc="sunset.gif" /> Alternative Attribute The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled. Text only browsers also depend on the alt attribute since they cannot display pictures. HTML Code: <imgsrc="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />

Image sizes and dimensions: • <imgsrc="sunset.gif" height="50" width="100"> • Used to personally specify the image dimensions, rather than relying on the browser • Vertically and Horizontally Align Images: • align (Horizontal) • right • left • center • valign (Vertical) • top • bottom • center

<p>This is paragraph 1, yes it is...</p> <p> <imgsrc="sunset.gif" align="right"> The image will appear along the...isn't it? </p> <p>This is the third paragraph that appears...</p>

Images as Links <a href=http://www.tizag.com/> <imgsrc="sunset.gif“> </a> Now the image will take you to a certain home page when you click it.

What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one

Style Sheets • A CSS sheet may be linked either internally or externally: • Internally, meaning within the html file.This is used for customizing a certain element particularly, and for one page only. • Externally, which is the more efficient way, provides the ability to customize the whole page including many elements, and also permits the user to use the same style for many different pages.

Internal Style Sheet • An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this: <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>

External Style Sheet • An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> • The browser will read the style definitions from the file mystyle.css, and format the document according to it. • An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below: • hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

Comments • HTML: •  • CSS: • /* This is a comment */

CSS Selector • CSS selectors are the heart and soul of CSS. They define which HTML elements you are going to be manipulating with CSS code. • In a typical CSS statement you have the following: SELECTOR { PROPERTY: VALUE } "Property" is the CSS element you wish to manipulate and "VALUE" represents the value of the specified property.

CSS Selector Name • The selector name creates a direct relationship with the HTML tag you want to edit. If you wanted to change the way a paragraph tag behaved, the CSS code would look like: p { PROPERTY: VALUE }example: body {color: black} • The above example is a template that you can use whenever you are manipulating the paragraph HTML element.

To make the style definitions more readable, you can describe one property on each line, like this: • p { text-align: center; color: black; font-family: arial } • You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color: • h1,h2,h3,h4,h5,h6 { color: green }

The Class Selector • With the class selector you can define different styles for the same type of HTML element. • Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles: • <p class="right"> This paragraph will be right-aligned. </p> • <p class="center"> This paragraph will be center-aligned. </p> • p.right {text-align: right} • p.center {text-align: center} • You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned: • .center {text-align: center}

You can also apply styles to HTML elements with particular attributes.The style rule below will match all input elements that have a type attribute with a value of "text": • input[type="text"] {background-color: blue}

The id Selector • You can also define styles for HTML elements with the id selector. The id selector is defined as a #.The style rule below will match the element that has an id attribute with a value of "green": • #green {color: green} • The style rule below will match the p element that has an id with a value of "para1": • p#para1 { text-align: center; color: red }

CSS Background Color • CSS Code: h4 { background-color: white; } p { background-color: #1078E1; } ul { background-color: rgb( 149, 206, 145); }

CSS Background Image • CSS allows you to control: • choosing if a background will repeat and which directions to repeat in. • precision positioning • scrolling/static images • Sample CSS Code: • p { background-image: url(smallPic.jpg); }

Background Image Repeat • You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction. • CSS Code: • p { background-image: url(smallPic.jpg); background-repeat: repeat; } • h4 { background-image: url(smallPic.jpg); background-repeat: repeat-y;} • ol { background-image: url(smallPic.jpg); background-repeat: repeat-x;} • ul { background-image: url(smallPic.jpg); background-repeat: no-repeat;}

CSS Background Image Positioning p { background-image: url(smallPic.jpg); background-position: 20px 10px; } h4 { background-image: url(smallPic.jpg); background-position: 30% 30%; } ol { background-image: url(smallPic.jpg); background-position: top center; } When using pixels, the location of the image will be (A)px from the left of the screen and (B)px from the top of the screen, where A and B are integers. When using percentages, the location of the image will be (A)% from the left of the screen and (B)% from the top of the screen, where A and B are integers. Available positioning keywords are: top, right, bottom, left, and center.

CSS Font Color h4 { color: red; }h5 { color: #9000A1; } h6 { color: rgb(0, 220, 98); }

CSS Font Family h4 { font-family: sans-serif; }h5 ( font-family: serif; } h6 { font-family: arial; }

CSS Font Size: • p { font-size: 120%; } • ol{ font-size: 10px; } • ul{ font-size: x-large; } • CSS Font Style • p { font-style: italic; } • h4{ font-style: oblique; }

HTML & CSS : A Tutorial