Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1of 34

HTML and CSS

Click to edit Master subtitle style

3/31/12

WebPages and its relationship with HTML and CSS


A web page can contain any information such as text, video, audio, forms and even interactive games. We see different types of webpages and with all the above said elements but there is one thing that is common, and thats HTML. XHTML (or the extended HTML ) is another form of html which does not have as much as stringent rules as html. Since the text is the universal language for all computer with different operating systems , like OSX, Vista, Linux etc, the hyper text or the linkable text is the basic for all the webpages and it is seen through or browsed through a software called browser. Hence HTML to like a mortar which holds all the building blocks like brick, Click is edit Master subtitle style Concrete, Stone etc. Html is Hyper Text Markup Language which links Text, Images, videos, audio, and Interactive Forms and games. CSS stands for Cascading Style Sheet which is also an industry standard on style sheet. Basically a style sheet is a set of rules that are created to standardize a web pages appearance. It instructs the webpage on the display of fonts, pictures, background images and its alignment. CSS will help in creating standardized rules on display of fonts, pictures, background images and its alignment. These rules or the CSS tags can be saved inside a html file, which will have an extension of.html , or separately as 3/31/12 CSS file, which will have an extension of .css .

Markups and web browsers

Web Browsers are created specifically for the purpose of reading instructions known as markups and displaying the results as webpages. Markups lives in a text files and gives orders to browser regarding headlines, paragraphs,background image, alignment, images, textwraps, videos, audios, and forms 3/31/12

Components of HTML
Syntax and Rules

Element Identify different part of html page by using tags. Attributes are information or instance of an element. Entities non ascii text characters such as copyright symbol. Entities originated from Standard Generic Markup language
3/31/12

Components of HTML
There are three components in HTML or XHTML Elements Attributes Entities

Elements Identify different part of html page by using tags. Attributes are the information about an instance of an element Entities are the non ASCII charecters such as copyright symbols and accented letters. The entities however has their origin from Standard Generic Markup Language. 3/31/12

Elements

Elements are the building block of the webpage. Elements are made up of tags and the text content within the tags. Tag pair are those tags that has a beginning tag and an ending tag. For example <title> </title> Single tags are those tags that are inserted into a page for some reason. 3/31/12 Unlike the tag pair element the single

Attributes

Attribute allow to use the elements differently depending on circumstance . You should incorporate attribute within the start tag of the element, after the element name with a syntax attribute name=value

3/31/12

Entities

Text makes the web possible but has limitation Entities are the special characters that come in a webpage. Most of these special characters are non ascii characters like our copyright symbols fractional and mathematical symbols and accented characters. Entities are also used in displaying 3/31/12 tag characters like < and > and the

HTML Entities Some characters are reserved in HTML. It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser will mix them with tags. To actually display reserved characters, we must use character 3/31/12 entities in the HTML source code.

HTML Entities

3/31/12

HTML Tag
Any Text that is with the angle brackets (<>) are called HTML Tag. HTML tag has a syntax. Any HTML tag should begin with two angle brackets one opening angle brackets and a closing angle brackets (for eg <html>). HTML tag should end with an angle bracket in the beginning and a backslash the html tag name and closing angle brackets in the end. (for eg <html>). Tags and the content between(within) the tags are called the HTML Elements.Angle brackets will enclose Click to edit Master subtitle style html and Xhtml markup and Curly braces or curly brackets enclose a CSS markup.

3/31/12

Parts of HTML Page.

Comments, in HTML page is the part that is not diplayed in web browser. Usually the comment is written in a HTML page for the programmer to understand what and why such a coding is done. Just like uour HTML Tags the comments also have to be started and ended To begin a comment, we should type

3/31/12

<html> Tag

<html> Tag forms the beginning of the html document and the ending of a html Document. <head> </head> The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
3/31/12

Other tags that come under the head tags

The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

3/31/12

<title> Tag

<title> </title>element in html document will display the title on the title bar of the browser.

For Example <html> <head> <title>Title of the document</title> </head> <body> 3/31/12

<base> Tag

The <base> </base> tag specifies a default address or a default target for all links on a page.

For Example <head> <base href="http://www.w3schools.com/imag es/" /> <base target="_blank" /> 3/31/12 </head>

<link> Tag

The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets

For Example <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> 3/31/12 </head>

<style> Tag

The <style> tag is used to define style information for an HTML document. Inside the style element you specify how HTML elements should render in a browser:

<head> <style type="text/css"> body {background-color:yellow} 3/31/12 p {color:blue}

<meta> Tag

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The <meta> tag always goes inside 3/31/12 head element. the

<script> Tag

The <script> tag is used to define a client-side script, such as a JavaScript. The script element either contains scripting statements or it points to an external script file through the src attribute. The required type attribute specifies the MIME type of the script.
3/31/12

Common uses for JavaScript are

<noscript> Tag

The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesnt support client-side scripting. The noscript element can contain all the elements that you can find inside the body element of a normal HTML page. The content inside the noscript

3/31/12

HTML Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.

For Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>


3/31/12

<hr /> Tag

The <hr /> tag creates a horizontal line in an HTML page. The hr element can be used to separate content:

For Example <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> 3/31/12 <hr />

HTML Paragraphs and Line Breaks

Paragraphs are defined with the <p> tag.

For Example <p>This is a paragraph</p> <p>This is another paragraph</> HTML Line Breaks

3/31/12

Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:

HTMLText Formatting Tags

This text is bold This text is big This text is italic This is computer output This issubscriptandsuperscript< b>Defines bold text 3/31/12 <big>Defines big text

HTML FONTS

The HTML <font> Tag Should NOT be Used The <font> tag is deprecated in HTML 4, and removed from HTML5. The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations. In HTML 4, style sheets (CSS) should be used to define the layout and 3/31/12 display properties for many HTML

HTML STYLE (Instead of <font>) Attributes


Styling HTML with CSS CSS was introduced together with HTML 4, to provide a better way to style HTML elements. CSS can be added to HTML in the following ways: inCascading Style Sheet files(CSS files)
3/31/12

in the<style> elementin the

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the 3/31/12 <a> tag.

<a> Not to be confused with <link>

<html>

The name attribute is used to create a bookmark inside an HTML document.

<body> <p> <a href="#C4">See also Chapter 4.</a> <!-- The bookmark link and the Display (syntax href=#bookmark name) -->
3/31/12

HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag. The <img> tagis empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image 3/31/12 want to display. you

Tables are defined with the <table> tag.

HTML Tables

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. <table border="1"> <tr> 3/31/12

HTMLLists
The most common HTML lists are ordered and unordered lists:

An ordered list:

The first list item The second list item The third list item An unordered list: List item List item List item

3/31/12

HTML Unordered Lists

<ul> <li>Coffee</li> <li>Milk</li> </ul>

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

3/31/12

HTML Ordered Lists


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol> <li>Coffee</li> <li>Milk</li> </ol>

3/31/12

You might also like