Scribd Logo
Unggah

Selamat datang di Scribd!

  • Alphaeon Web Design Workshop

    Diunggah oleh

    api-277800531
    98 tayangan24 halaman
    Web Design Workshop Basics of HTML and CSS 1 What is a webpage? Document written in plain text interspersed with formatting instructions of HTML Content is structured. HTML5 is the latest standard oStandardized in October 2014 oHTML4 was standardized in 1997. CSS means that properties "cascade down through all child elements of a given element"

    Deskripsi Asli:

    Judul Asli

    alphaeon web design workshop

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Web Design Workshop Basics of HTML and CSS 1 What is a webpage? Document written in plain text interspersed with formatting instructions of HTML Content is structured. HTML5 is the latest standard oStandardized in October 2014 oHTML4 was standardized in 1997. CSS means that properties "cascade down through all child elements of a given element"

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    98 tayangan24 halaman

    Alphaeon Web Design Workshop

    Diunggah oleh

    api-277800531
    Web Design Workshop Basics of HTML and CSS 1 What is a webpage? Document written in plain text interspersed with formatting instructions of HTML Content is structured. HTML5 is the latest standard oStandardized in October 2014 oHTML4 was standardized in 1997. CSS means that properties "cascade down through all child elements of a given element"

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 24

    Web Design Workshop

    Basics of HTML and CSS


    1

    What is a website?
    Web pages served from a unique domain
    Accessible via a network

    What is a webpage?
    Document written in
    plain text
    interspersed with
    formatting
    instructions of HTML
    Content is
    structured

    What is HTML?
    Hyper Text Markup
    Language
    Code for web pages
    HTML5 is the latest standard
    oStandardized in October
    2014
    oHTML4 was standardized
    in 1997
    Markup Tags
    o<p>
    o<h3>
    o<video>
    4

    Style of HTML
    <html>
    <head>
    <title> document title </title>
    </head>
    <body>
    ...your page content
    </body>
    </html>
    5

    Elements of HTML
    Tags are the elements that create the components of a
    page
    Tags surrounded by angle brackets < >
    Usually come in pairs
    Example: Start tag <p> and end tag </p>
    Stuff between is called element content
    Tags are not case sensitive
    New standard is to use lower case

    Tag Example

    <p>Hi, thank you for


    coming!</p>
    7

    Common Tags
    Headings
    <h1></h1>
    Title of section
    Paragraph
    <p> </p>
    Text
    8

    to

    <h6></h6>

    Example of Headers and Paragraph


    <h1>My New Heading</h1>
    <p>This is my new Paragraph. Creating web pages is
    exciting and fun. This is awesome!</p>

    Example of Headers and Paragraph

    My New Heading
    This is my new Paragraph. Creating web pages is
    exciting and fun. This is awesome!
    <h1>
    <h3>
    <p>

    <a>
    10

    Anchor Tag (Link)


    Anchor tag <a href=URL>...</a>
    <a href="http://www.shoutmd.com">Join ShoutMD
    today!</a>
    Join ShoutMD today!

    11

    Image Tag
    <img>
    There is no </img> closing tag, just > or />
    <img src=URL alt=description of image />
    Source URL points to link of image

    12

    Image Tag Example


    <img src=
    https://web.shoutmd.com/assets/images/3a05a83a.logo
    .png
    alt= ShoutMD Logo/>

    13

    Full Example

    14

    <!DOCTYPE html>
    <html>
    <head>
    <title>MAISS Website</title>
    </head>
    <body>
    <nav>
    <a href="index.html>Home</a>
    <a href="courses.html">Courses</a>
    <a href="contact.html">Contact</a>
    </nav>
    <div>
    <p>Hello my name is Julio and I am writing about myself.
    </p>
    <img src="me.jpg" alt=a picture of me/>
    </div>
    </body>
    </html>

    Result

    15

    What is CSS?
    Cascading Style Sheets
    Standard method of
    applying style and
    appearance to content
    Cascading means that
    properties cascade
    down through all child
    elements of a given
    element
    16

    How Does it Work with HTML?

    17

    Example of CSS and HTML


    Based on rules
    Selectors determine where rules are applied

    <p class=red-text>This is some text!</p>

    This is some text!


    <p class=green-text>More text!</p>
    More Text!

    18

    .red-text{
    color: red;
    font-size: 40px;
    }
    .green-text{
    font-family: Verdana;
    color: green;
    }

    Anatomy

    19

    Anatomy

    20

    Regular Syntax

    p { font-size: 24px; }
    .my-class{
    color: #ffffff;
    display: block;
    }
    21

    Inline Syntax (HTML)

    <p style=font-size:
    24px;>Hi!</p>
    same as
    p { font-size: 24px; }
    22

    Where is CSS coded?


    Inline

    <style> in
    <head>
    <html>

    <p style=font-size:
    24px;>Hi!</p>
    }

    23

    <head>
    <title>My Site</title>
    <style>
    p{
    font-size: 24px;
    }
    .my-class{
    color: #ffffff;
    display: block;

    </head>
    <body>
    content..
    </body>
    </html>

    Separate File

    Lets Code!
    https://jsbin.com/
    https://justpaste.it/shoutm
    d

    24

    Anda mungkin juga menyukai