Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
-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?
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>.
1 2 3
<title></title>
</header>
5 6
<!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>
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
<!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>
<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 ©</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
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
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
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.
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;>
#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;
/* 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; }
/*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;}