Week 2 – HTML Pt. 2

 

Week 2 – HTML Pt. 2

For this week we will cover: Naming Conventions and index.html

Manage your Site: Remote vs. Local File Systems
Uploading your files using FTP/SFTP
Using Web Standards and Semantic Markup
Basic text formatting tags
Linking files
Special Characters
Web Developer Add-ons
Validating your Code

  • The Web is Powerful – Embrace it!
  • Commenting and Formatting Your Code
  • Color in HTML
  • Web Safe Fonts
  • Meta Data
  • Intro to Cascading Style Sheets
    • What is CSS?
    • The Box Model
    • CSS Syntax
    • Classes and IDs
    • Three ways to use style sheets
    • Manipulating Basic CSS Properties

  •  

    CODE ACADEMY LESSON I

    To review what we learned last week, go to Code Academy and create an account. Complete the following exercises:

    Introduction to HTML
    This unit will introduce you to the basics of HTML, the language used to create websites.
    HTML Basics: 13 exercises

    HTML Structure: Using Lists
    This unit covers more advanced HTML structure and teaches you how to customize your pages.
    HTML Basics II – 16 exercises


    NESTED ELEMENTS RULES

    Important Note! With the exception of div, you cannot nest one block-level element inside of another. For example, this is wrong:

    <p><h1>You can't put a heading inside a paragraph!</p>

    But this is ok:

    <div><p>You CAN put a paragraph inside a div!</p>

    You can nest inline elements inside each other:

    <strong><em>I can make this text bold and italic!</em></strong>

    And you can nest inline elements inside block-level elements:

    <p><em>I can make this paragraph italic!</em></p>

    But you can never nest a block-level element inside an inline element:

    <em><p>This is wrong!</p></em>

    AND you can never nest a block-level element inside a list element:

    <li><p>This is wrong!</p></li>

    SPECIAL CHARACTERS AND NON-BREAKING SPACES

    Text characters that are outside the normal ASCII character set must be represented in html via special character codes. This includes things like em dashes, curly quotes, ampersands, etc. These special character codes always begin with an ampersand (&) and end with a semi-colon(;). For example, an em dash (—), would be represented in your code like this:

    &mdash;

    or

    One especially useful special character is the non-breaking space:

     &nbsp;

    Put this character in your code when you want to have more than one white space in a row. However, do not use it to create indented or tabbed formatting, we’ll learn how to do that later!

    For a full list of character codes, visit W3School’s Special Characters Reference.


    LINKING FILES

    File linking is done through the use of the <a> or anchor tag.

    Use the following syntax for linking to another document:

    <a href="URL_of_target_document">link_text</a>

    For example, if you were to link to Google, you would use the following code:

    <a href="http://www.google.com/">Google</a>

    To link to an email address, which will spawn the user’s designated email client, you simply need to add the “mailto” parameter:

    <a href="mailto:emailaddress@server.com">email_text</a>

    You may also link to “anchors” in the same file.

    To do this, you must create both the link:

    <a href="filename.html#anchor_name">anchor_text</a>

    and the anchor to link to:

    <a name="anchor_name">anchor_text</a>

    Absolute vs. relative linksWhen citing the URL of the target document, you may use an “absolute” or “relative” path.

    An “absolute” path is the full web address of the document, with protocol. This path will not change depending on the document that is linking to it. This type of link is primarily used when you are linking to an address that is external to the site you are linking from.

    For example, the absolute path of this site is:

    http://www.do1thing.org

    A “relative” path is one where the information is given relative to the document on which the link appears. This type of linking will only work within a given site directory, it can not be used for external URLs.

    With relative links, you must be aware of where the document is located in the file directory in relation to the file being linked to.

    In the same directory:

    filename.html

    In a lower (sub) directory:

    subdir_name/filename.html

    In a higher (parent) directory:

    ../filename.html

    Relative to the site root:

    /filename.html

    (note: it is unusual to use paths relative to the site root)


    LINK TARGETS

    Unless instructed otherwise, a Web browser will open a target document in the same window as the linking document. The user of the “target” attribute allows you to direct the target document to an alternate window. Some of the attributes below only apply to framesets, which we will cover briefly later in the course.

    TARGET ATTRIBUTE VALUES

    _blank Opens the linked document in a new window
    _self Opens the linked document in the same frame as the link
    _parent Opens the linked document in the parent frameset
    _top Opens the linked document in the main browser window, replacing all frames

    name Opens the linked document in the window with the specified name


     

    Common Link Types

    Link to launch a New Window
    <a href=”newpage.html” target=”_blank”>
    Link to launch email application
    <a href=”mailto:myname@email.com”>
    Anchor Links to a specific place on the same page
    <a name=”top”></a>= an anchor must be indicated in a single, specific spot on the page
    <a href=”#top “>Return to Top</a> = a link with “#” before the name that was applied to theanchor link specified in another part of the page


    CODE ACADEMY LESSON II

    Complete HTML Structure: Using Lists in Code Academy
    This unit covers more advanced HTML structure and teaches you how to customize your pages.
    HTML Basics II: 16 exercises


    COMMENTING YOUR CODE

    You can place a comment tag in your HTML to put a note into the code that will not be rendered by the browser. This is especially handy in a long and complex page. A comment is formatted as follows:

    <!-- This is a comment -->

    Everything between the <!– and –> tags will be hidden from the browser, but visible when you view the source.


    COLOR

    All color in Web pages, whether it is in text, background color, or other interface elements, is expressed in the HTML via hexidecimal codes. These codes consist of a # followed by 6 letters and numbers. For example, the code for white is #FFFFFF.

    Below are two excellent references for the hex codes for the Web-safe palette.The Web-safe palette is a collection of colors that have been determined to be consistently rendered across boundaries.

    Webmonkey Color Code Chart
    Visibone Webmaster’s Palette


    FONTS

    Because a Web browser can only utilize those fonts installed on the end-user’s machine, there are a limited number of fonts reliably available across platforms. Here’s an up-to-date list of them:

    Web Safe Fonts for Mac & PC

    You should only use these fonts, or generic font designations, in your style sheets.

    Here is a great resource for viewing how Web fonts will look in a browswer:

    Typetester


    META DATA

    Meta data is located within the <head> of a web page. Your meta data is basically information that you insert that explains what this page/site is all about. Copy and past the code text below into your head:

    1. Keywords:
      Information inside a meta element describes the document’s keywords.
      The Code Looks Like this:
      <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
    2. Description:
      Information inside a meta element describes the document.
      The Code Looks Like this:
      <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"/>

    CODE ACADEMY LESSON III


    HOMEWORK | WEEK 2

    1. Tag THREE websites on del.icio.us that are relevant to web design and specifically to what you learned in class today. It can be a tutorial, an article, a design blog or anything else that you think would be useful as a reference. Write a note in the comment section about why you think each one is a useful resource. Tag each post with the following tag:

    yorkweb12013

    AND add additional tags that will help you to find the link when you go back to Delicious and search for it.

    Create a new html page with the content of your resume called “resume.html”. Use all of the new tags we learned today to format your resume. Before you begin, decide which tags map semantically to which parts of the resume.

    2. Add an a href link to your resume.html page creating a link to an external website. Add the code for target = blank.

    3. Add the code for the email link to your resume.html page.

    4. Add the space character to anywhere on your resume.html page.

    5. Add the comment code:

    <!-- This is a comment -->
    somewhere on your page and make a comment.

    5. Create a new html page called “index.html”. Remember, index.html is the HOME PAGE (landing page) on your website. Create hyperlinks to your artist and resume pages on this page.

    Add both lines  of METADATA code into your head.

    6. Create a new html page called “artist.html” and insert the text you wrote for your artist statement and mark up the text.

    7. Create a new page called: homework.html and upload it to your server. Add hyperlinks on that page that will take me to your index.html, artist.html, homework.html and contact.html pages.

    8. Create a new html page called “contact.html”. Create hyperlinks to your homework, resume and artist pages on this page.

    Add links between each of the pages.

    You can do this by create a LIST and adding that list to each of your pages. Below is an example:

    <ul>    <li><a href=”http://www.katmakes.com”>Home</a></li>    <li><a href=”http://www.katmakes.com/resume.html”>Resume</a></li>    <li><a href=”http://www.katmakes.com/artist.html”>Artist</a></li>    <li><a href=”http://www.katmakes.com/contact.html”>Contact</a></li>    <li><a href=”http://www.katmakes.com/hw.html”>Homework</a></li>     </ul>

    You will need to incorporate the following in your resume.html page:

    • page anchor links within the longest page to take the user back up to the top of the page
    • external links to at least two (2) web pages that you will use as online reference related to the topics you wrote about on your pages
    • an email link to your contact email address

Upload all new pages to your server.  ***Please let me know if you DO NOT have a web space

9. IF YOU DID NOT finish the Code Academy classes one through three, finish them for homework.

  • Introduction to HTML
  • HTML Structure: Using Lists
  • HTML Structure: Tables, Divs, and Spans

REFERENCE: The following three (3) reference articles are great resources…

Webmonkey – HTML Cheatsheet http://www.webmonkey.com/webmonkey/reference/html_cheatsheet/

Webmonkey – Stylesheets Guide http://www.webmonkey.com/webmonkey/reference/stylesheet_guide/

Brett Merkey – Most Useful CSS Properties with Examples http://home.tampabay.rr.com/bmerkey/cheatsheet.htm