{the jump}

Intro to HTML

Session 2

Preface: Appearance

  • At the moment we are focusing on writing skeleton code correctly
  • This means we won't be worried about how it looks
  • Have patience!

Folder/Document Naming

  • SHORT
  • LOWER CASE
  • NO SPACES, ONLY UNDERSCORES '_'
  • MEANINGFUL NAMES
  • UNIQUE NAMES - NO [NEAR] DUPLICATES
  • DO NOT BEGIN WITH NUMBERS
    • ​If numbers are involved, then 001, not 1, so that you don't get 1, 10, 2, etc

 

In coding:

  1. Tidiness and neatness are a great help
  2. Principle of Least Surprise

Recap

  • The web is about sharing documents, so let's make one!
    • How can you "View Source" documents online?
    • DOM Inspector (in chrome)
      • Windows: ctrl-shift-i (or j)
      • Mac: cmd-opt-i (or j)
        • Might need to enable in settings first on other browsers
  • We need to transform text into 'hypertext'
    • and to do that we 'mark it up', i.e. by adding tags around our text that tells the browser how to handle it.

Working Parts of an HTML Page

  1. <!DOCTYPE html>
    1. You need to define the document as html5
  2. <head>
    • the head is not displayed. 
    • this is where you link resources needed for the doc and extra info about it (meta tags, title, etc.)
    • any resources loaded in head are blocking
  3. <body>
    • This is where the visible content goes
    • If you can't see your code, double check it's in the body.
  4. Complex? Fear not!!
    • VS Code comes equipped with emmet as standard!
    • type '!' and hit tab

Text

  • If you just type words in a HTML file it creates a 'text node'
  • Loose words like this are problematic as there is no way to control them.
  • All words should be inside a tag of some sort
  • Here we're talking about the words that we want to show up on the webpage for users to see. There is another type of text that is for programmers' eyes only...

Comments

  • You have probably seen green lines that looked like:
    • <!-- I am a comment -->
  • These lines are for humans, not for machines
  • They will be ignored by the browser
  • They are available in HTML, CSS & JavaScript documents
    • You can press cmd + / (mac)  or ctrl + / (win) to create comment formatting
    • They are useful for
      • leaving notes to explain or label code
      • temporarily switching bits of code off
      • automation processes (much later)

HTML Tags

  • Markup Language
  • Tag language
  • Lets us control CONTENT 
<!DOCTYPE html>
<html>
  <head>
    <title>Homepage</title>
  </head>
  <body>
    <!-- Text -->
    <h1>Hello World!!</h1>
    <p>This is mah new page!!</p>

    <!--images -->
    <img src="happy.jpg" alt="I was happy">

    <!-- links to other documents -->
    <a href="see_more.html">See More</a>

  </body>
</html>
  • Tags
    • case insensitive ( lowercase is normal!)
    • opening tag
    • closing tag (necessary?)
    • Nesting
      • self-closing tags (img, link, hr, br, embed, input, meta)
    • Indentation
      • Win: Shift+Alt+F
      • Mac: Shift+Option+F
      • Ubuntu Ctrl+Shift+I
      • (beautifier plugin)
    • Whitespace
      • 99% doesn't matter but avoid if poss.
<!DOCTYPE html>
<html>
  <head>
    <title>Homepage</title>
  </head>
  <body>
    <!-- Text -->
    <h1>Hello World!!</h1>

    <p class="strapline">
      This is mah new page!!</p>

    <!--images (self-closing) -->
    <img src="happy.jpg" 
      alt="I was happy">

    <!-- anchor tags (links) -->
    <a href="/see_more.html" id="mainCTA"
    title="Go to happiness products page">
      See More</a>

    <!-- lists: unordered -->
    <ul>
        <li>Tree</li>
        <li>Pig</li>
    </ul>
    <!-- lists: ordered -->
    <ol>
        <li>one</li>
        <li>two</li>
    </ol>

  </body>
</html>

HTML Tag Syntax

  • Note the '/' on the closing/end tag
  • Note the discolouration in syntax highlighting demo
  • contents can be either text or otherelements

Attributes

  • You probably saw that <img src="happy.jpg" alt="happy">
  • src and alt are attributes
  • it is extra information the browser needs to make the component work, that you need to tell it.
  • syntax:
  • DOUBLE QUOTES

Attributes

  • There are some attributes that all elements can have.
  • They are called global attributes
  • A list of them are here
  • Ones we'll focus on
    • class
      • denotes the element as a member of a club. 
      • has no effect without css or js using it
      • An element can have multiple [space separated] classes (belong to multiple clubs)
    • id
      • Identifies that particular element only
      • must be unique on the page
    • aria-*
      • Accessibility helpers (more on this later)

Element-specific Attributes

  • Some elements need specific kinds of attributes
    • a link, needs to know where it's linking to
    • an image needs to know its source
  • MDN HTML - has helpful guides
  • Let's put some tags on the page

Language, Text & Direction

  1. Supply a language for the text (lang attribute)
    1. Direction of language (dir attribute)
  2. Which character set is used: UTF-8 (ref)(video)

Paragraphs

  • Normal loose text is called a text node
  • It is not easy to manipulate and not semantic in meaning
    • always avoid untagged loose text!!
  • <p>...</p> <-- paragraph tags denote a paragraph

Headings

  • Headings give special meaning to text
  • They increase your SEO
  • They are used as navigation markers by assistive technologies
  • <h1>...</h1> is a heading
    • The number refers to the 'level' of heading
    • There are 6 levels
  • Example usage:
    • h1 - My pet store
      • h2 - dogs
        • h3 - baskets
      • h2 - cats
        • h3 - collars
  • Do not use for text sizing. They are for semantics!!

Lists

  • Bulleted or numbered lists
  • <ul> or <ol>
    • that's: 'Unordered List' or 'Ordered List'
  • List Items make up the content of a list
    • <li>...</li>
    • You can nest anything in the <li>s, including other lists (for nested lists)
       
  • Special: Definition Lists
    • <dl>...</dl> for key/pair values
      • <dt> is the Description Term
      • <dd> is the Description Details
      • (a bit awkward to style)

Images

  • Self-closing, because nothing can go inside
  • (Images, like form inputs, etc. are actually not part of the page, and are injected by the operating system)
  • Custom attributes
    • src is where the image will get its data
      • hot-linking: you can (if you have the image rights) pull them straight off the web; or
      • you can reference them from the local file system
    • alt is what will appear if the image fails to load
  • ACCESSIBILITY ALERT: Images themselves can't be seen by many technologies, like SEO, so make sure there is a text alternative somewhere!!

Links (anchors)

  • <a href="*target URL or element id*">Text shown</a>
  • <a href="https://www.google.com">Google</a>
    • Can target (point to) a remote page
    • Can target an id on your page (e.g. href="#cats")
    • Can be used for protocols:
      • mail: href="mailto:james@test.com"
      • telephone: href="tel:075163928765"
  • ​Can be set to download a resource

<a href="" download>

  • ​target can also be used to determine how the link opens in a new tab/window etc
  • Can include icons or html entities, like &gt; (>)
    • Always make use of the accessibility text (explain)

Serving vs filesystem and index.html

  • You can get your browser (which is basically a file reading program) to open your files locally with what's called the 'file api'.
  • You'll know it's the file api because the address will begin with file:///
  • This is good enough for now, but later on we will need to put them on a proper server
  • I expect you're wondering about why pages are named index.html
  • In the beginning web pages were academic docs, so the first page users were presented with was the index, which was helpful for navigating to other pages.
  • Now, by default, most servers will conventionally serve a document with index in the name as the root (so https://my server.com/ will serve https://my server.com/index.[html, php, whatever])

Required Reading

https://yoast.com/ultimate-guide-robots-txt/

Exercise

1) Practice starting  a new project 10 times from scratch.
2) Pet Shop Website: Make an amazing pet shop website with
 a homepage and 3 other pages (cats, dogs, parrots, etc.)

  •  The header on each page should be consistent and contain the [global] nav and footer
  • On the homepage use a link that scrolls to another part of the page. (href=“#id”) and an email and a phone link
  • The Layout of the page should comply with basic html5 structure
  • Include images - some from the net (hot-linked) and some from your local machine.

3) Familiarise yourself with MDN HTML guide. You don’t need to memorise it, you just need to get used to looking up elements and their attributes. (Try looking up <a>, <img> and <ul>, <ol>, <li> and <dl> - don’t worry if what you're reading doesn’t all make sense yet.)