Sei sulla pagina 1di 24

Chapter 3

-baby steps-

H T M L 5 - D I G I T A L C L A S S R O O M H T M L 5 - V I S U A L W E B D E S I G N - V I S U A L G U I D E

What is html5?

HTML or hypertext markup language, is a programming language designed,

documented and maintained but the World Web Consortium (w3c). A markup language is a programming language that uses special tags to embed words and commands in and around regular text. HTML5 is the latest version of html available today for the world wide web. It is a new specification that builds on the previous html 4.01 and xhtml 1.1 specifications, providing you with the tools that you neeed to produce the next generation of websites. html5 also relies on other technologies, such as cascading style sheets version 3 (CC3) and javascript as the magic to make websites really pop and move. So much do these three disciplines complement each other that they all fall under HTML5 banner.

What is a tag?
Tags are the basic units or building blocks of an html5 file

(or code as you may call it now since writing it ma be referred to as coding, too). Web pages are designed and html5 codes are made up of these tags- they control how the html does its structuring, laying out and formatting. Structure of a tag Tags are enclosed in angle brackets < and > and an example of its is <html>.

Create an HTML5 web page


1.) the doctype element is required for legacy reasons. It tells the browser to run in standards mode, which basically ensures that It follows the latest html specification that It is coded for, as closely as possible. 2.) Start tags usually are in pairs of start And end tags. Indicated in the start tag is the type of tag used. Also attributes are place Inside the start tag. 3.) Head tags contents in the head part of the Webpage enclosed in <head></head> 4.)Title tags- inside of the title is the title of The webpage/s. <title></title> 5.) Body tags- everything appears on you webpage may it be the texts, images, videos, etc. should be inside the body. Which enclosed in <body></body> 6.) End Tags- used to signify the end of the start tags. End tag have a slash / as seen in the example

1 2 3

<!doctype html> <html> <head>

<title></title>
</header>

5 6

<body> </body> </html>

Create an HTML5 web page (cont.)


7.) HelloWorld is the title Of your webpage. 8.) <h1> Welcome to Hello World!</h1>header it is the 7 Title of your content. 9.) <p>texts</p> -paragraph Where your text is placed. 8 10.) <a href=></a> -Link Reminder: end tag should have / slash.
10

<!doctype html> <html> <head> <title>HelloWorld</title> </head> <body> <h1>Welcome to Hello World!</h1> <p> This is my first webpage using html5 markup language. My name is John follow me on twitter <a href=www.twitter.com/123>click here</a> Thank you!!!<p>

</body>
</html>

header wraps your page header;

footer wraps your page footer;


section groups content into sections (e.g. main area,

sidebar etc); article separates the individual articles from the rest of the page; nav contains your navigation menu; figure usually contains an image used as an illustration for your article.

Structure

Simple webpage using html5- Part 1


<!doctype html> <html> <head> <title> Hello World! </title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <div id="wrapper"> <header> <hgroup> <h1>HelloWorldLogo</h1> </hgroup>

<nav> <ul> <li class ="active"><a href="">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">Gallery</a></li> <li><a href="">Contact Us</a></li> </ul> </nav> </header>

Simple webpage using html5- Part 2


<aside> <article> <hgroup> <h3>&lt;aside&gt;</h3> </hgroup> <p> The quick brown fox jumped over the lazy dog1. </p> <p> The quick brown fox jumped over the lazy dog2. </p> The quick brown fox jumped over the lazy dog3. </p> </article> </aside>

Simple webpage using html5- Part 3


<section>

<article> <hgroup> <h2>Article 2</h2> </hgroup> <p> The quick brown fox jumped over the lazy dog1. </p> <p> The quick brown fox jumped over the lazy dog2. </p> The quick brown fox jumped over the lazy dog3. </p> </article> </section> <footer> <p>www.helloworld.com &copy;</p> </footer> </body> </html>

<article> <hgroup> <h2>Welcome Geeks</h2> </hgroup> <img src="image/logo.png" alt="omagehere" width="150" height="150" /> <p> <p> The quick brown fox jumped over the lazy dog1. </p> <p> The quick brown fox jumped over the lazy dog2. </p> The quick brown fox jumped over the lazy dog3. </p> </p> </article> <hr/>

output

Webpage title

Webpage content

Introduction to CSS

CASCADING STYLE SHEETS

What is CSS?
CSS or Cascading Style Sheets allow you to control your

page layout or a simple way to add style (e.g. font, colors, spacing). HTML deals with structure while CSS deals with style. With CSS you will recognize some similarities with HTML attribute names and values. But in CSS you will use curly braces {} colons : and semi colons ; and you will use selectors and declarations .

CSS STRUCTURE
Curly braces (Open) Colon Semi colon Declaration block

p
selector

{ color: red;

}
Curly braces (Close) Value

The role of CSS


Use a separate language from HTML. CSS allows you to

apply consistent styling of elements across all pages on your site, so that all headings, lists and paragraphs look and act the same on every page of a site. h1
A C

{
color: blue; margin- top: 1em;
D B

A. Selector B. Declaration C. Property D. Value

Three Kinds of CSS


External Style Sheets Are the most global of the three kinds of CSS because you can apply the same one to an unlimited number of pages. They allow you to develop a consistent style across pages. They easily allow you to change the layout of your entire website by simply changing the external style sheedtand ever page is instantly updated. EX: <link rel =stylesheet type =text/css href=styles.css/>

Embedded Style Sheets

Are used for creating a document-wide style rule. They are placed within the header of the document. EX. <style type = text/css> They are also used when you have a page that you want to present in a different style from other pages. Embedded style sheets override external style sheets.

Inline Style Sheets

Are use for isolated changes to a headline, paragraph, picture or other element. Inline style sheets override external and embedded style sheets. Ex. <p style background color: gray;>

INLINE STYLE SHEETS


<!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;fontsize:20px;"> The quick brown fox jumped over the lazy dog1.</p> </body> </html>

EMBEDDED STYLE SHEETS


<!doctype html> <html> <head> <title> Hello World! </title> <style type="text/css"> body {background-color:green;} p {color:blue;} </style> </head> <body> <p> The quick brown fox jumped over the lazy dog1. </p> <p> The quick brown fox jumped over the lazy dog2. </p> The quick brown fox jumped over the lazy dog3. </p> </body></html>

EXTERNAL STYLE SHEETS


mystyle.css body {backgroundcolor:green;} p {color:blue;} h1 {color: red;}
<!doctype html> <html> <head> <title> Hello World! </title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1> Welcome Geeks </h1> <p> The quick brown fox jumped over the lazy dog1. </p> <p> The quick brown fox jumped over the lazy dog2. </p> The quick brown fox jumped over the lazy dog3. </p> </body>

(mystyle.css) CSS3 Part 1


body { background:url(image/bg.png) #A98436 no-repeat left top; background-color:green;} p {color:blue;}

#wrapper {width: 960px; margin: 0 auto;} /* header*/ header {height: 150px; background: #00A0B1;} hgroup h1 { background-image: url('image/bg.png'); background-repeat: no-repeat; width: 250px;height: 120px; color: #FFF; padding: -22px 0 0 -

20px;

(mystyle.css) CSS3 Part 2


/* buttons*/ nav {width: 400px; height: 20px; background:;margin-top: -17px; margin-left: 540px;} nav ul {margin: 0 0 0 -10px;} nav li {float: left; list-style-type:none; padding: 0 10px width: 890px; /*spacing of button*/ width: 90px; height: 20px; text-align: center; font-weight: bold; line-height: 20px; border: 1px solid #f7c58e; /*borderline of the button*/ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /*button color*/ /* Fallback Color */ background: #dbf234; }

(mystyle.css) CSS3 Part 3


/*hover color */ nav li a:hover { /* Fallback Color */ background: #00A0B1; } /* aside*/ aside {width:400px; height:732px; background: #A39D9F; float:right; margin-top: -1px;} hgroup h3 {color: #fff; padding: 10px 0 0 20px;} aside article {width:400px; background: #DC572E; color:#FFF; margin-top:-10px;} /* articles*/ section {width:600px; background: #CFCCCD; margin-top: -20px;} hgroup h2 {color: #FFFFFF; padding: 10px 0 0 10px;} article {width:600px; background: #77B900;} article p {padding: 10px;} /* footer*/ footer {height: 40px; background: #09F; margin-top: -16px;} footer p {padding: 10px 0 0 10px;}