C4: Session 2

HTML File Structure & Paths

Concept:
HTML File Structure

HTML File Structure

HTML File Structure

<!-- Tells the browser that this file contains HTML5 code -->
<!DOCTYPE html>

HTML File Structure

HTML File Structure

<!-- Tells the browser that this file contains HTML5 code -->
<!DOCTYPE html>
<!-- The HTML document root -->
<html>
  
</html>

HTML File Structure

HTML File Structure

<!-- Tells the browser that this file contains HTML5 code -->
<!DOCTYPE html>
<!-- The HTML document root -->
<html>
  <!-- This is where we setup the document's 
       metadata information -->
  <head>
  	
  </head>
  
</html>

HTML File Structure

HTML File Structure

<!-- Tells the browser that this file contains HTML5 code -->
<!DOCTYPE html>
<!-- The HTML document root -->
<html>
  <!-- This is where we setup the document's 
       metadata information -->
  <head>
    <!-- For example, the document title 
         that is displayed on the tab -->
    <title>Document Title</title>
  </head>
  
</html>

HTML File Structure

HTML File Structure

<!-- Tells the browser that this file contains HTML5 code -->
<!DOCTYPE html>
<!-- The HTML document root -->
<html>
  <!-- This is where we setup the document's 
       metadata information -->
  <head>
    <!-- For example, the document title 
         that is displayed on the tab -->
    <title>Document Title</title>
  </head>
  
  <!-- This where where we setup the document's
       body and start building our page components! -->
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

HTML File Structure

HTML File Structure

<!DOCTYPE html>
<html>
  <head>
    <title>Document Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

Clean up all the comments and the file should look like:

HTML File Structure

HTML Metadata

  • The <meta> tag defines metadata about an HTML document
    • Character Set
    • Viewport Settings
    • Keywords
  • Metadata is used by the browser to render the page and used by search engines to optimize search results (SEO)

HTML File Structure

HTML Metadata

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

HTML File Structure

HTML Metadata

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

Required

HTML File Structure

HTML Metadata

<meta charset="UTF-8">

  • Defines the document's character set ensuring proper interpretation of your HTML code
  • UTF-8 is a specific character encoding
    • Most websites use UTF-8 which is the current standard and can translate almost every language in the world
    • Before UTF-8 became the standard, ASCII was used and unfortunately only encodes English characters,

HTML File Structure

HTML Metadata

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • Defines the document's viewport settings which control the page's dimensions and scaling
    • width=device-width sets the width of the page to follow the width of the device
    • initial-scale=1.0 sets the initial zoom level when the page first renders into the browser

HTML File Structure

From now on...

Your HTML file should always start like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
  </head>
  <body
    <!-- HTML elements go in here -->
  </body>
</html>

HTML File Structure

VSCode Shortcut!

  1. Type ! in your editor,
  2. Wait for Intellisense to pop up
  3. Hit Tab

Practice: HTML File Structure

Create a simple HTML page that contains the following:

  • h1 heading of your name
  • h2 heading of your current job title 
  • A link to your LinkedIn profile (or email if you don't have one)
  • An unordered list containing:
    • Which city are you from?
    • Which city are you currently residing in?
    • What made you decide to learn to code?
  • Add an image of yourself or your favorite picture

Concept:
HTML Paths

HTML File Paths

Examples

  • <a href="https://classroom.udacity.com/me">My Udacity Classroom</a>
  • <img src="https://via.placeholder.com/200.png" alt="Code Background" />
  • <img src="./images/image.png" alt="Image on local machine" />

HTML File Paths

HTML Paths

  • An HTML path is the location or address of a particular file resource that can be local (within the same project folder) or external (from another server on the internet).
  • Using the correct path is important so that the browser knows where to retrieve and access the file resource.
  • Two types:
    • Absolute Paths
    • Relative Paths

HTML File Paths

Absolute Paths

A path that defines the full web address to a file resource usually from an external server.

  • For example, the absolute link to retrieve an image from another website looks like this:

    • https://www.example.com/images/picture.jpg
      • The tells the browser to go to the website www.example.com, look in the images folder, and access the file named picture.jpg

HTML File Paths

Relative Paths

A path that defines the relative path address to a file resource's location based on the current working file.

There are two types of file-relative paths in HTML:

  1. A path that starts with a single dot ./
    • This tells the browser to look for a resource starting from the current working directory
  2. A path that starts with two dots ../
    1. This tells the browser to look for a resource starting from the directory one level above the current working directory

HTML File Paths

Relative Paths

There is a third type of file-relative path, a root-relative path.

  • The root is the top-level folder that contains all the files and subfolders for a website.
  • A root-relative path begins with a forward slash / character 
    • If you are on a deployed website, a root-relative path tells the browser to look for a file starting from the root of the website's domain
    • If you are running your website locally, a root-relative path tells the browser to look for a file starting from the root of your computer (the Users folder on a Mac; the C:\ drive on Windows)

❌  NOT RECOMMENDED

  1. If you use a root-relative path to files on your computer, other people will not have the same directory structure on their machine. They will not be able to open your site because all the links will be broken.
  2. When publishing your site, root-relative paths can cause issues if the domain changes or if the website is moved to a different location on the server. All the links will be broken!

Concept Practice: Relative Paths

Practice

https://sharynneazhar.github.io/udacity-cohort4-materials/session2/6-relative-paths/my-project/

Lab: Basic HTML Page

https://learn.udacity.com/nanodegrees/nd0011-oneten-p1/parts/cd0038/lessons/ls12029/concepts/9f6770cb-7afd-4447-aaa1-0d2519f298b5

Lab: Basic HTML Page

Next Session

CSS Foundations

C4-Session2

By Sharynne Azhar

Made with Slides.com

C4-Session2

  • 17

More from Sharynne Azhar