Scribd Logo
Upload

Welcome to Scribd!

  • 204 Web01 2024s

    Uploaded by

    api-733273996
    45 views7 pages
    This document provides instructions for students to create a basic HTML page with headings, paragraphs, lists, and links. It outlines 4 steps for adding different elements to the page: 1. Setting up the basic HTML structure with <html>, <head>, <body>, and <p> tags. 2. Adding headings, italics, bold, and identifying tags. 3. Creating unordered, ordered, and nested lists with <ul>, <ol>, and <li> tags. 4. Inserting links to files, emails, and anchors on the page using <a> tags and href attributes. Students are instructed to copy code examples, add text content, and save the file

    Original Description:

    Original Title

    204 web01 2024s

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides instructions for students to create a basic HTML page with headings, paragraphs, lists, and links. It outlines 4 steps for adding different elements to the page: 1. Setting up the basic HTML structure with <html>, <head>, <body>, and <p> tags. 2. Adding headings, italics, bold, and identifying tags. 3. Creating unordered, ordered, and nested lists with <ul>, <ol>, and <li> tags. 4. Inserting links to files, emails, and anchors on the page using <a> tags and href attributes. Students are instructed to copy code examples, add text content, and save the file

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    45 views7 pages

    204 Web01 2024s

    Uploaded by

    api-733273996
    This document provides instructions for students to create a basic HTML page with headings, paragraphs, lists, and links. It outlines 4 steps for adding different elements to the page: 1. Setting up the basic HTML structure with <html>, <head>, <body>, and <p> tags. 2. Adding headings, italics, bold, and identifying tags. 3. Creating unordered, ordered, and nested lists with <ul>, <ol>, and <li> tags. 4. Inserting links to files, emails, and anchors on the page using <a> tags and href attributes. Students are instructed to copy code examples, add text content, and save the file

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Assignment HTML 01 Technology for Musicians, MUS 204

    Dr. Kurt Fowler


    Indiana State University

    BASIC HTML
    **NOTE: For these HTML Assignments, please use the provided text le for copying and
    pasting.

    Software Setup: use a basic text editing app on your Mac or PC


    • Mac: TextEdit
    • PC: Notepad
    Mac Users:
    Adjust the settings for TextEdit as follows:
    • Open TextEdit
    • Under the Format menu, choose "Make Plain Text"
    • Go to the TextEdit menu option and choose Preferences
    • In the Preferences dialogue box, go to the "Open and Save" tab, then check the very rst
    box (Display HTML les as HTML code instead of formatted text)
    Save the HTML to a le. TextEdit normally saves les with a .txt extension, but since you're
    writing HTML, you need to save the le as .html
    • Go to the File menu
    • Choose Save
    • Enter a name for the le in the Save As eld and add the .html le extension. (e.g.
    204_Web01_LastName.html)
    • A pop-up screen asks if you want to append the standard extension .txt to the end.
    Choose Use .html
    PC Users:
    Open Notepad and create a new le
    Save your HTML to a le: Notepad normally saves les as .txt. But since you’re writing HTML,
    you need to save the le as .html. If you do not do this, all you will have is a text le that has
    some HTML code in it.
    • Click on File and then Save As.
    fi
    fi
    fi
    fi
    fi
    fi
    fi
    fi
    fi
    fi
    fi
    fi
    fi
    fi
    Assignment HTML 01 Technology for Musicians, MUS 204
    Dr. Kurt Fowler
    Indiana State University

    • Navigate to the folder you want to save to.


    • Change the Save As Type drop-down menu to All Files (*.*)
    • Name your le. Be sure to include the .html extension (e.g. 204_Web01_LastName.html)
    All Users
    Now open your le through your preferred web browser
    • Open a web browser
    • Go the File menu and choose to "Open File..."
    • Locate and open the le you just created
    • The le should be blank

    Step 1: Setting up a basic HTML page


    Introduction
    • HTML stands for HyperText Markup Language
    • There are three basic parts to an HTML page: Head, Body, Closing
    • Tags are used to created content in an HTML page
    • There will be opening tags <> and closing tags </> for each element
    Basic Page Setup (type the following):

    <html>
    <head>
    <title>Dogs and Tables</title>
    </head>
    <body>

    <p>Hello!</p>

    </body>
    </html>

    Save your le, then refresh your web browser to see "Hello!" in the upper left corner of the
    screen.
    fi
    fi
    fi
    fi
    fi
    Assignment HTML 01 Technology for Musicians, MUS 204
    Dr. Kurt Fowler
    Indiana State University

    Step 2: Add Headings & Simple Formatting


    • there are six heading tags, starting with <h1>, all of which have a slightly different font
    style
    • the <em> tag is used to italicize text
    • the <strong> tag is used for bold text
    • the <p> tag is a paragraph tag
    • the id attribute helps identify any tag that you may want to use as a placeholder

    Add the following tags (you can add your own text) to the previous code between the
    <p>Hello!</p> and the closing body tag </body>

    <h1 id="headings">Headings</h1>
    <p>This is my awesome web page</p>
    <p><em>How exciting</em></p>
    <p><strong>I can barely contain myself</strong></p>

    <h2>Heading 2</h2>
    <p>This heading seems a bit smaller</p>

    <h3>Heading 3</h3>
    <p>This heading is so suave.</p>
    <p>There are 3 more possible headings, so we'll quit here.</p>
    <p>Let's stick with Heading 3 and move on to lists.</p>

    Save your le, then refresh your web browser


    fi
    Assignment HTML 01 Technology for Musicians, MUS 204
    Dr. Kurt Fowler
    Indiana State University

    Step 3: Creating Lists

    The following foundational code is used for Unordered Lists:


    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>

    The following foundational code is used for Ordered Lists:


    <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ol>

    The following foundational code is used for Nested Lists:


    <ul>
    <li></li>
    <ol>
    <li></li>
    <li></li>
    </ol>
    <li></li>
    <ol>
    <li></li>
    <li></li>
    </ol>
    <li></li>
    <ol>
    <li></li>
    <li></li>
    </ol>
    <li></li>
    Assignment HTML 01 Technology for Musicians, MUS 204
    Dr. Kurt Fowler
    Indiana State University

    <ol>
    <li></li>
    <li></li>
    </ol>
    </ul>

    Fill in the lists with text similar to what is shown below and add them underneath the heading
    code from Step 2, but above the closing body tag </body>

    <h1 id="lists">Lists</h1>
    <h2>Unordered lists look like this</h2>
    <ul>
    <li>Thing One</li>
    <li>Thing Two</li>
    <li>Thing Three</li>
    <li>Thing Four</li>
    </ul>

    <h2>Ordered lists have exciting numbers</h2>


    <ol>
    <li>Thing One</li>
    <li>Thing Two</li>
    <li>Thing Three</li>
    <li>Thing Four</li>
    </ol>

    <h2>Look mom, I can even nest the lists</h2>


    <ul>
    <li>Thing One</li>
    <ol>
    <li>Thing One.One</li>
    <li>Thing One.Two</li>
    </ol>
    <li>Thing Two</li>
    <ol>
    <li>Thing Two.One</li>
    <li>Thing Two.Two</li>
    </ol>
    Assignment HTML 01 Technology for Musicians, MUS 204
    Dr. Kurt Fowler
    Indiana State University

    <li>Thing Three</li>
    <ol>
    <li>Thing Three.One</li>
    <li>Thing Three.Two</li>
    </ol>
    <li>Thing Four</li>
    <ol>
    <li>Thing Four.One</li>
    <li>Thing Four.Two</li>
    </ol>
    </ul>

    Save your le, then refresh your web browser

    Step 4: Links
    The following code examples are link samples for different types of les:
    • Basic Code: <a href="SOURCE LOCATION URL”>DESIRED TEXT></a>
    • Essential Code Elements: <p><a href=""></a></p>
    • To open in a new tab or window, add the target attribute like this: <a href="SOURCE
    LOCATION URL" target="_blank">DESIRED TEXT</a>
    • URL = Uniform Resource Locator

    Add the following underneath the code for lists, but above the closing body tag </body>:

    <h1 id="links">Links</h1>
    <p><a href="ADD URL LINK HERE" target="_blank">ADD IDENTIFYING TEXT HERE</
    a></p>
    <p><a href="ADD URL LINK HERE" target="_blank">ADD IDENTIFYING TEXT HERE</
    a></p>
    <p><a href="#lists">Anchors go to places on this page</a></p>
    fi
    fi
    Assignment HTML 01 Technology for Musicians, MUS 204
    Dr. Kurt Fowler
    Indiana State University

    <p><a href=mailto:"Kurt.Fowler@indstate.edu">Send an email to


    Kurt.Fowler@indstate.edu</a></p>
    <p><a href="https://www2.indstate.edu/som/fowler/204/ les/Score.pdf"
    target="_blank">Link to Documents</a></p>
    <p><a href="https://www2.indstate.edu/som/fowler/204/ les/Rascals.mp3"
    target="_blank">Link to Audio Files</a></p>

    Save your le, then refresh your web browser

    Upload your .html to Canvas for the Web 01 Assignment.


    fi
    fi
    fi

    You might also like