Professional Website
Development
TECH 272

Welcome to HTML5!

Document Structure

  • HTML5
    • DOCTYPES

    • <!DOCTYPE html>  
<html>
<head>  
<title>Title of page</title>  
</head>  
<body>  

<p>This is my first homepage. </p>
<strong>This text is bold</strong>  

</body>  
</html>

  • Block vs Inline Elements
    • block-level
      • generates new block (new line) on page
      • structural pieces of the page
      • can contain block or inline elements
    • inline elements
      • occur within a line - does not produce a line break
      • typically for formatting
      • may only contain other inline elements (if at all)
  • Common HTML Elements
    • Paragraph: <p> (block)
    • Break: <br /> (block)
    • Horizontal Rule: <hr> (block)
    • Headings: 1-6 <h1> </h1> (block)
      • don't forget align attribute
    • Image: <img> (inline)
    • Anchor: <a> (inline)
      • Link: <a href="http://www.google.com" title="Google">Google</a>
    • Bold: was <b>, now <strong> (inline)
    • Italics: was <i>, now <em> (inline)
    • Font: <font> (inline)
      • <font color="red" face="Geneva, Arial" size="2">
    • Lists:
      • <ul> unordered list; produces bulleted list (block)
      • <ol> ordered list; produces numbered list (block)
      • <li> list item; to be used nested within <ul> or <ol>
      • <dl>, <dt>, <dd> definition list, definition term, definition data
  • Less Common Elements
    • Inline
      • <abbr> abbreviation <abbr title="Maryland">MD</abbr>
      • <acronym> acronym <acronym title="World Wide Web"> WWW</acronym>
      • <address> address
      • <em> italic text
      • <strong> bold text
      • <big> increase relative text size
      • <small> decrease relative text size
      • <sub> subscript
      • <sup> superscript
      • <q> inline quote
    • Block
      • <hr> horizontal rule <hr align="center" size="4" width="80%" color="gray" noshade="noshade">
      • <blockquote> indented block of text
      • <div> division <div align="center" id="navbar">
    • Key Attributes
      • <body text="white" bgcolor="purple" vlink="gray" alink="blue">
    • Special Characters
      • &nbsp; non-breaking space
      • &copy; © copyright
      • &trade; ™ trade mark
      • &reg; ® registered trade mark
      • &lt; < less than
      • &gt; > greater than
      • &pound; £ Pound
      • &yen; ¥ Yen
      • &euro; € Euro
  • View Source - or "Oops, my code is showing!"
  • Uploading your Work to the Web
    • Filenames
      • don't use special characters or spaces in file names ($,#,@, * )
      • use all lowercase for consistency
      • use .html extension for consistencey
      • NEVER include spaces in file or folder names
    • Name your homepage index.html (exactly that and all in lowercase).
    • Software Filezilla (instructions for a clean download of FileZilla)

    Once you have completed your homepage (or any html page for this class) it's time to upload it (as well as any image files you may want to use).

How to Create Your Webspace and Upload Your Homepage!

A reminder that everything you need to get up and running is contained in this video...

Creating Your Webspace-20220330_170852-Meeting Recording.mp4

    • Step 1: Sign up with InfinityFree for your free web space. https://app.infinityfree.net/register
    • Step 2: Complete this form with the URL for your new webspace, so we all have access to your class site (especially me for grading!)
    • Step 3: Download and install FileZilla (client version) https://filezilla-project.org/
    • Step 4: Create your homepage if you haven't already (you can use Brackets or any other simple text editor). This is covered in the second video and Chpt 4 of our textbook.
    • Step 5: Use Filezilla to connect to your server space and upload your homepage. Here's what FileZilla does.
    • Step 6: Go to the Class List and check your site to make sure everything is displaying correctly!

Troubleshooting Image Links

Q. Help! My web page is all a link! I only wanted a short text link
A. You're missing the closing tag for your link, the </A> tag. Place the tag wherever you wish the link text to end.

Q. My image doesn't show up on my web page!
A. Whoo, boy, if Web Diner had a dollar for every time this question was asked! Anyway, check the following:

  1. Hit the "Reload" or "Refresh" button on your browser. Sometimes it's a simple server glitch that prevents the graphic from loading.
  2. Has your graphic been uploaded?
  3. Check that the name of your graphic matches exactly, case (upper case, lower case) the IMG SRC tag in your HTML page. Make sure your graphic file name does not include any spaces or symbols (like & or #)
  4. Check that your HTML file has all the essential tags in the correct order.
  5. Still no graphic? Try reuploading your graphic, and make sure that it is being uploaded as binary and not ASCII.
  6. Make sure your graphic is either in GIF or JPG file format. Although Internet Explorer will display files in BMP format, Netscape will not. BMP files are also much larger than a GIF would be.
  7. Make certain that you are not missing any quotation marks from your IMG SRC or other HTML tags. A single quote, for example <IMG SRC="notes.gif> can cause a missing image.
  8. Open the graphic in a paint program like Paint Shop Pro, Photoshop, etc. to make sure that it will open. If the graphic won't open, then the file is corrupted and you need to create a new graphic.



Still Trouble?

    1. What to do when you know you have uploaded your html page(s) and it's not showing in your browser.
      1. Two thing you can do...
        * Shift/refresh - Hold down the shift button and click the refresh button on your browser.
        * "Forcing the issue" - Delete the offending file from the server. Then refresh the page on the server. You should get a file not found error. Then reupload and refresh again and all your updates should show.
      What's happening is the browser is getting "lazy" when you ask for a refresh. Sometimes, it says, "Why should I make another trip to the server when I have a cache copy right here?" Holding down the shift key while clicking the refresh button on your browser usually fixes the laziness.

Homework 1 Homepage

  • Using Notepad, TextPad, Text Wrangler (Mac) or Brackets, create a homepage for your site and name it index.html. Be sure to use all the structural elements of a basic HTML document and add a good document title. Add some
    • headers
    • paragraphs
    • an image (a picture of yourself would be great if you have one handy),
    • a bulleted list
    • a numbered list
    • an email link
    • and one other link.

Upload it to your index page to your web space. Be sure to browse your page using the class list after you upload it to ensure that everything is working properly.