Scribd Logo
Unggah

Selamat datang di Scribd!

  • HTML Workshop Spring13

    Diunggah oleh

    api-199907138
    135 tayangan28 halaman
    Web content management is a skill that is useful and will make you more marketable. This is an introduction to creating static webpages. HTML is written in elements, which are specific to the language itself.

    Deskripsi Asli:

    Judul Asli

    html workshop spring13

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Web content management is a skill that is useful and will make you more marketable. This is an introduction to creating static webpages. HTML is written in elements, which are specific to the language itself.

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    135 tayangan28 halaman

    HTML Workshop Spring13

    Diunggah oleh

    api-199907138
    Web content management is a skill that is useful and will make you more marketable. This is an introduction to creating static webpages. HTML is written in elements, which are specific to the language itself.

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 28

    Learning a New Language: HTML

    Spring 2013 ITD Workshop

    PURPOSE + LEARNING OBJECTIVES


    This is an introduction to creating static webpages. Since libraries are increasingly moving toward web content, web content management is a skill that is useful and will make you more marketable.

    What you will (hopefully) learn:


    What HTML and CSS are Some important terminology Coding standards To read and edit basic HTML code, such as web site templates

    SOME THINGS YOU WILL NEED


    1. A code editor 2. For Macintosh:
    o Text Wrangler

    For Microsoft Windows:


    o Notepad++

    Any simple-text editor will work (e.g., TextEdit, Notepad)

    A place to put your web page files on the Internet I: Drive Google Sites, Wix, Weebly Web hosting service provider with domain name

    You can also view HTML webpage files locally in your favorite web browser.

    WHAT IS HTML?
    HTML = HyperText Markup Language

    Tim Berners-Lee, the cool British computer science who created the World Wide Web, was the pioneer of HTML. It became standardized in November 1995 as HTML 2.0.

    World Wide Web Consortium (W3C) is the international standards organization for the World Wide Web. W3C maintains the standards for HTML, CSS, XML, among many other languages.

    HTML is not a scripting language.

    HELLO_WORLD.HTML
    <!DOCTYPE html> <html> <head> <title>Hello HTML World</title> </head> <body> <p>Hello world!</p>

    </body>
    </html>

    HELLO_WORLD.HTML

    HEADING TAGS
    Heading tags are used for titles and subtitles within the content of the webpage. The font size gets smaller as the numbers get bigger. <body> <h1>Headings</h1>

    <h2>are</h2>
    <h3>great</h3> <h4>for</h4> <h5>titles</h5> <h6>and subtitles</h6> </body>

    HEADING TAGS
    What is wrong with this picture?

    HEADING TAGS
    All tags come in pairs!

    TEXT FORMATTING TAGS


    These are some of the commonest text formatting tags that add emphasis to your content.
    <body> <p><b>Bold text</b></p> <p><em>Emphasized text</em></p>

    <p><i>Italic text</i></p>
    <p><u>Underlined text</u></p> <p><del>Struckthrough</del></p> <p><sup>Superscript</sup></p>

    <p><sub>Subscript</sub></p>
    </body>

    HTML AS MARKUP LANGUAGE


    HTML is written in elements, which are specific to the language itself, and each element typically has three components:
    Tags are enclosed in angle brackets start tag / end tag Attributes may be included in the start tag Content is always placed in between the two tags

    <tag attribute=value>content</tag>
    Empty elements (i.e., elements without content) do not have an end tag and follow this form <tag attribute=value />

    USEFUL ATTRIBUTES
    Align attribute allows you to align your content left, right or center. The default is always left. CSS is making this attribute less popular.

    <body> <h2 align=left>Left</h2> <h2 align=center>Centered</h2> <h2 align=right>Right</h2> </body>

    USEFUL ATTRIBUTES
    The title attribute adds a tiny text pop-up to any HTML element. Search engines use this attribute to catalog your webpage as well as increase your search ranking. This attribute is most often used with images.
    <body> <h1 title=Hi!>Big Title Heading Tag</h1> </body>

    HYPERTEXT REFERENCE (HREF)


    A hypertext reference (href) is a link tag that directs a user to a valid URL.
    <body> <h3>This is a hyperlink:</h3> <br /> <a href=http://www.nytimes.com/>NY Times</a> </body>

    HYPERTEXT REFERENCE (HREF)


    There are five different kinds of URLs you can use in the href attribute: <a href=http://www.uiuc.edu>UIUC</a> <a href=../internal/index.html>Homepage</a>

    <a href=#top>Go to top</a>


    <a href=mailto:help@support.lis.illinois.edu?subject=I need help>GSLIS Help Desk</a>

    <a href=http://www.uiuc.edu/some_file.zip>Download this file</a>

    COMMENTS
    Comments are a way for you to make notes in your HTML code. They are never shown in the web browser. You can also comment out existing code instead of deleting it. <body> <!- This is a comment. It is not displayed. --> <p>This text is shown in the web browser.</p> </body>

    <body> <!- This comment is temporarily removing this code. <p>This text is shown in the web browser.</p> --> </body>

    IMAGES
    Almost every website uses images, and a website without images is pretty boring. The <img> tag does not have content. It is an empty element. <body> <p>What is the plural of TARDIS?</p> <img src=tardis.jpg /> </body> Images as link/anchor:

    <body> <a href=../internal/some_file.html> <img src=tardis.jpg /> </a> </body>

    IMAGE SOURCE URLS


    The source of your images may be either global or local. But it is good practice to make them all local.
    Src Attribute Code
    src=tardis.jpg src=imgs/tardis.jpg src=../tardis.jpg

    Explanation
    Image is located in the same directory Image is located in the imgs directory Image is located up a directory

    src=../imgs/tardis.jpg

    Image is located up a directory in another directory called imgs


    Image is located at a specific URL elsewhere; this is known as a global location

    src=http://www.uiuc.edu/ tardis.jpg

    ATTRIBUTES OF THE <IMG> TAG


    You can specify the exact width and height of the image. <img src=tardis.jpg width=220 height=293 /> Two things to note about specifying the dimensions of an image: Always use the same ratio of width to height Always scale downward bigger images scale down nicely, but smaller images will become pixelated if you make them much bigger The alt (alternative) attribute allows you to display alternate text if the image does not load for some reason.

    <img src=tardis.jpg alt=The TARDIS />

    UNORDERED LISTS
    There are different types of lists in HTML. The unordered list is named so because its items are not numbered. Its items are displayed with bullet points. <body> <h3>Todays Task List</h3> <ul> <li>LIS501 homework</li> <li>LIS506 assignment</li> <li>Exercise</li> <li>Do the cleaning</li> </ul> </body>

    ORDERED LISTS
    The items of an ordered list are numbered.

    <body> <h3>Goals</h3> <ol> <li>Finish school</li> <li>Get a job</li> <li>Make money</li> <li>Get own place</li> </ol> </body>

    LIST ATTRIBUTES
    For unordered lists, you can specify which type of bullet point you would like by using the type attribute in the ul tag. <ul type=circle> [] </ul> <ul type=square> [] </ul> <ul type=disc> [] </ul> For ordered lists, you can pick a starting number other than 1 by using the start attribute.

    <ol start=3> [] </ol>


    If you want something other than numbers in the ordered list, you can choose among a few other options like alphabetical or roman numerals.

    <ol type=a> [] </ol> <ol type=A> [] </ol>

    <ol type=i> [] </ol> <ol type=I> [] </ol>

    TABLES
    The HTML element table is composed of rows and columns. This element is a container element, which means it can contain other elements. <table border=1> <tr> <td>Row 1/Cell <td>Row 1/Cell </tr> <tr> <td>Row 2/Cell <td>Row 2/Cell </tr> </table>

    1</td> 2</td>

    1</td> 2</td>

    Note: Do not use tables to structure the entire content of your webpage. This practice is now considered old fashioned.

    <DIV> ELEMENT
    The <div> element is nothing more than a container. Web developers now use <div> elements to arrange content on webpages instead of <table> elements. This will become important to you once youve learned more CSS. <div id=someDIV name=someDIV title=DIV Element> <!-- any HTML element can go in here --> </div> <div> elements can be nested in one another.

    HTML VS. XHTML


    XHTML = Extensible HyperText Markup Language Until version 5.0, HTML was based on Standard Generalized Markup Language (SGML) standards.

    XHTML, which is replacing HTML, is based on the Extensible Markup Language (XML) standards.
    What this means for you:
    Tags remain the same as in HTML 5.0 There are stricter rules in the coding Everything must be lowercase All tags are closed and nested There are other more technical differences, too.

    WHAT IS CSS?
    CSS = Cascading Style Sheet CSS files are separate from HTML files, but they are included in the HTML file. It is best practice to use CSS for all formatting in your HTML files. This is the current trend. Some HTML tags are becoming depreciated because of CSS. A few examples: - <font> - Lists: <ul>, <il>, - <table> as used for main content structure - Align attribute and other formatting attributes

    THE CSS WORKSHOP


    The Instructional Technology & Design (ITD) Office occasionally offers a workshop on CSS.

    Some other helpful resources: - W3C Tutorials http://www.w3schools.com/css - Lynda Tutorials http://go.illinois.edu/lynda

    QUESTIONS, COMMENTS, CONCERNS


    Thank you for attending our workshop! Contact GSLIS Help Desk: help@support.lis.illinois.edu Information on this presentation Adam Mann: aemann2@illinois.edu Steven Smidl : smidl2@illinois.edu Feedback is always appreciated! http://go.illinois.edu/itdfeedback

    Anda mungkin juga menyukai