Scribd Logo
Carica

Benvenuto in Scribd!

  • Css 3

    Caricato da

    Richard Arellano
    113 visualizzazioni24 pagine
    HTML 5 and CSS 3

    Titolo originale

    Css3

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PPTX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    HTML 5 and CSS 3

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    113 visualizzazioni24 pagine

    Css 3

    Caricato da

    Richard Arellano
    HTML 5 and CSS 3

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 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;}

    Potrebbero piacerti anche