Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • WWW Course: Bkitatom, Nov 2011 Hieu Le Trung

    Încărcat de

    theheroofvn
    13 vizualizări26 pagini
    Here is a draft HTML document that meets the requirements: <!DOCTYPE html> <html> <head> <title>Cửa hàng hoa Hồng Đỏ</title> </head> <body> <h1>Cửa hàng hoa Hồng Đỏ</h1> <p>"Cung cấp những bông hoa tươi nhất cho khách hàng."</p> <hr> <h2>Giới thiệu cửa hà

    Descriere originală:

    Titlu original

    Www Day1 Slide

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Here is a draft HTML document that meets the requirements: <!DOCTYPE html> <html> <head> <title>Cửa hàng hoa Hồng Đỏ</title> </head> <body> <h1>Cửa hàng hoa Hồng Đỏ</h1> <p>"Cung cấp những bông hoa tươi nhất cho khách hàng."</p> <hr> <h2>Giới thiệu cửa hà

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    13 vizualizări26 pagini

    WWW Course: Bkitatom, Nov 2011 Hieu Le Trung

    Încărcat de

    theheroofvn
    Here is a draft HTML document that meets the requirements: <!DOCTYPE html> <html> <head> <title>Cửa hàng hoa Hồng Đỏ</title> </head> <body> <h1>Cửa hàng hoa Hồng Đỏ</h1> <p>"Cung cấp những bông hoa tươi nhất cho khách hàng."</p> <hr> <h2>Giới thiệu cửa hà

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 26

    BKITAtom, Nov 2011 Hieu Le Trung

    WWW course
    1st day

    Today target
    Web and relative terms
    Web and web programming Website vs. webpage, domain vs. URL

    Course introduction
    Objective Content Useful tools

    HTML basic

    Web & web programming


    Web in English language and web in our daily talks World Wide Web and internet

    Web & web programming cont.


    Web programming, huh? For front-end developer: the war between browsers

    Website and webpage


    Multiple webpage

    Under one domain website

    Domain vs. URL


    Domain
    www.bkitclub.net google.com my.opera.com

    URL
    Absolute
    http://www.bkitclub.net/forum http://my.opera.com/vietnamese

    Relative
    /imgs/bg.png ../style/main.css

    Course objective
    Understand our web Have the ability to implement a static webpage (maybe a website) Have the background to study more about web development.

    What will we do?


    Get to know the face of our web (done before) Study the HTML language Study the CSS language Hum
    Our case-study: a flower shop website Your assignment: blog theme building (just to be sure your effort is effectively)

    Our friends
    Some major browsers
    IE 9 Firefox 6+ with firebug add-on Chrome 14+ Opera 11+

    A text editor
    Window notepad Notepad++, Gedit Netbeans, Eclipse

    W3School at http://w3school.com , BkitClub forum

    10

    HTML
    Stand for Hypertext Markup Language A markup language, not a programming language An HTML document is eq. to a webpage Its brother: XHTML

    11

    HTML Element
    <a href=page1.html>Click here</a>

    <img src=../image.jpg alt=hi! />


    o Start/Opening tag

    o End/Closing tag o Attribute: name=value


    o Content: everything between the start and end tag

    12

    HTML charater reference


    See the HTML Character Entity Reference.html

    13

    Document type declaration


    One declaration for each HTML document Tell the browser how to render the HTML document and display it on the computer screen Keep your page being viewed as the same way in several browsers and system.

    14

    HTML document structure


    <!DOCTYPE html> <html> <head>

    Meta data: keywords, script, style sheet, favicon


    </head> <body> The content of your page: headings, divisions, paragraphs, images, hyper links,

    </body> </html>

    15

    Today tags
    <title> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <div>, <p> <blockquote>, <q> <hr>, <br> <b>, <i> <span>

    16

    <title>
    Tags: opening and closing tag Set the page title Attributes: none Examples:

    <html> <head>
    <title>HTML introduction</title> </head> <body> The content of the document...... </body> </html>

    17

    Heading tags (<h1> - <h6>)


    Tags: opening and closing tag Set the HTML headings Attributes: global attributes and event attributes Level: block Examples:

    <h1>This <h2>This <h3>This <h4>This <h5>This <h6>This

    is is is is is is

    heading heading heading heading heading heading

    1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>

    18

    <div>
    Tags: opening and closing tag Define a division or a section. We usually use the <div> element to group HTML elements and format them with CSS. You can, but not recommended to, use <div> with text content Attributes: global attributes and event attributes Level: block Examples: <div> <h3>This is a heading</h3> <p>This is a paragraph.</p> <a href=/some/where>This is a link.</a> </div>

    19

    <p>
    Tags: opening and closing tag Define a paragraph. Attributes: global attributes and event attributes Level: block Examples:

    <p>This is some text in a paragraph.</p> <p>Lorem ipsum dolor sit amet <a href=/a/link>A link inside a paragraph</a></p>

    20

    <blockquote>
    Tags: opening and closing tag The <blockquote> tag specifies a section that is quoted from another source. Attributes: cite, global attributes and event attributes
    cite: Specifies the source of the quotation

    Level: block Examples:

    <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The worlds leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>

    21

    <q>
    Tags: opening and closing tag Define a short quotation Attributes: cite, global attributes and event attributes
    cite: Specifies the source of the quotation

    Level: text Examples:

    <p>WWF's goal is to: <q>build a future where people live in harmony with nature</q>. We hope they succeed.</p>

    22

    <hr />
    Tags: opening and self-closing tag Creates a horizontal line in an HTML page. Attributes: global attributes and event attributes Level: block Examples:
    <h1>HTML</h1> <p>HTML is a language for describing web pages.</p> <hr />

    <h1>CSS</h1> <p>CSS defines how to display HTML elements.</p>

    23

    <br />
    Tags: opening and self-closing tag Inserts a single line break. We just use it to insert a line break, not to separate two paragraphs. Attributes: global attributes and event attributes Level: block Examples:

    <p>This text contains<br />a line break.</p>

    24

    Bold and itatic text: <b> & <i>


    Tags: opening and closing tag Specify a bold or itatic text. Attributes: global attributes and event attributes Level: text Examples:

    <p>It was a <b>red</b> house with a <b>blue</b> door.</p> <p>He named his car <i>The lightning</i>, because it was very fast.</p>

    25

    <span>
    Tags: opening and closing tag Provide localized formatting within documents. This tag is also used to group inline elements. Attributes: global attributes and event attributes Level: text Examples:

    <p>My mother has <span style="color:lightblue">light blue</span> eyes.</p>

    26

    Yu cu
    Hin thc mt HTML document theo yu cu sau: Trn trnh duyt hin th tiu ca trang web l Ca hng hoa <tn ca hng> C s dng <hr /> v quotation C t nht hai on, mi on c t nht mt heading
    Gii thiu v ca hng Gii thiu v ch ca hng (c th v bn)

    Cc ni dng thm Ch : tp tin c phn m rng l .html hoc .htm

    S-ar putea să vă placă și