8/23/2018

  • Review Web Intro
  • Intro HTML

Terminology

  • An IP address is like a...
  • A server is...
  • What is Client Side programming?
  • What does the server 'serve to' the client?

Web Standards & Best Practices

The web is very open and loose, but there are "official" rules.

  • HTML, CSS, and JavaScript need to be valid
  • Accessibility standards need to be met for people with disabilities
  • Valid Metadata for search engines and other tools.

Validation Tools

Intro into HTML

HTML

  • HyperText Markup Language
  • Last major "revision" HTML5 in 2014
  • Standardized by the World Wide Web Consortium (W3C) - https://www.w3.org/

What does HTML look like?

Terminology

  • Element
    • A component of HTML
    • Paragraph, list, table, div, img
  • Tag
    • Shows the beginning and end of a tag
    • Contains information about the tag's purpose

Containing Elements

<p> Content</p >

Empty HTML Elements

<br/ >

Core HTML Tags

Doctype

The Doctype tag tells the web browser what version of HTML is contained in your page. 

                    
<!doctype html>

HTML Tag

Your HTML tag immediately follows the Doctype tag. Every page must have one and all content goes in between the tags. Google guides recommend omitting these, but maybe buggy in old versions of IE. 

                    
<!doctype html>

<html>

</html>

Google HTML guidlines

Head and Body Tags

The Head tag contains information used by the browser or search information

The Body tag contains everything visible to the user

***Once again, Google guides recommend omitting these.

Google HTML guidlines 


<!doctype html>
<html>
    <head>
        <title>Page Title</title>
    </head
    <body>
        Page Content
    </body>
</html>

Content Tags

Elements inside the body tag are nested. The newest element must be closed before it's parent. Similar to nesting dolls.

Paragraph Tags

Paragraph tags are used for general blocks of text.


<p>This is my first paragraph</p>
<p>This is my second paragraph</p>

This is my first paragraph

This is my second paragraph

Paragraph Tag comparison

Paragraph Tags

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo velit erat, quis sodales ligula commodo a. Praesent id massa maximus, rhoncus tellus varius, posuere lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo velit erat, quis sodales ligula commodo a. Praesent id massa maximus, rhoncus tellus varius, posuere lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo velit erat, quis sodales ligula commodo a. Praesent id massa maximus, rhoncus tellus varius, posuere lectus.

Div tags

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo velit erat, quis sodales ligula commodo a. Praesent id massa maximus, rhoncus tellus varius, posuere lectus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo velit erat, quis sodales ligula commodo a. Praesent id massa maximus, rhoncus tellus varius, posuere lectus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo velit erat, quis sodales ligula commodo a. Praesent id massa maximus, rhoncus tellus varius, posuere lectus.

Heading Tags

The heading tag is used to label important blocks of content. 


<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Formatting

There are tags available for adding emphasis and important

    <p>
        There are tags available
        for adding <em>emphasis</em>
        and <strong>important</strong>
    </p>

The Old Way

There were tags dedicated to italics, bold and underline 

<p>
     There were tags dedicated to
     <i>italics</i>,
     <b>bold</b>
     and <u>underline</u>
</p>

These tags are deprecated and you should use CSS to replace these

Special Characters

Special characters such as   ©, >, ¶, and —

Attributes

Come after the initial tag declaration.

Typically a name value pair.

Changes how elements look or act.

Some tags have unique attributes.

Hyperlink

Hyperlinks are primarily used to link to different webpages.

The tag wraps text or images and allows them to be clicked

  • Base Tag: <a></a>
  • Primary Attributes
    • Href : The page address you wish to link to
    • Title: Used to describe what you are linking to.
  • Additional Attributes
    • Target: Tells the browser where to open the link
    • Rel: Describes the relationship between to the link.

Hyperlink Continued

We can use the hyperlink tag for a couple more things.

  • Open applications via protocols.
    • Email me! 
      <a href="mailto:Jonathan.Middaugh@jbhunt.com">Email me!</a>
    • Play Portal! 
      <a href="steam://run/400">Play Portal!</a>

Image

Used to inject an image into the page

  • Base Tag:<img />
  • Primary Attributes
    • src: The specific URL of an image
    • alt: The alternate text of the image
  • Image Best Practices
    • Use CSS to resize the image if you need to.
    • Don't reference images from other websites without permission

File Paths

Relative Paths

  • "index.html" Looks for index.html in the current folder
  • "pages/index.html" Starts in the current folder and looks inside the 'pages' folder
  • "../pages/index.html" The '..' signifies is going to go back a directory before looking for the pages folder
  • "/pages/index.html" The '/' signifies that is going to start at the root of your URL.

Absolute Paths

  • http://mysite.com/pages/index.html

Lists

There are two types of list. Ordered List and Unordered lists. They both contain list item tags.

Unordered List

Commonly just a bulleted list. 



    
    
  • Item 1
    • 
    
  • Item 2
    • 
    
  • Item 3
        
      
            
    • Nested 1
      • 
            
    • Nested 1
      • 
        
    
    
    • 
    
  • Item 4
    •
  • Item 1
  • Item 2
  • Item 3
    • Nested 1
    • Nested 1
  • Item 4

Ordered List

Similar to the unordered list, but uses numbers instead of bullets 


    
    
        
  1. Item 1
    2. 
        
  2. Item 2
    3. 
        
  3. Item 3
            
      
                
    1. Nested 1
      2. 
                
    2. Nested 1
      3. 
            
    
        
    4. 
        
  4. Item 4
    5.
  1. Item 1
  2. Item 2
  3. Item 3
    1. Nested 1
    2. Nested 1
  4. Item 4

Tables

Tables are use to display tabular data in a grid formation. Tables are frequently misused.

  • Base Tag:<table/>
  • Row Tag:<tr>
  • Column Tag:<td>

What the HTML looks like

See the Pen UA-HTML-Tables by Jon (@Middaugh) on CodePen.

Comments

Html Comments are used to add information to code. Comments can be important when other people are looking at your code. 


        <!-- Start Header -->
<div class="header">
</div>
<!-- End Header -->

Div Tag

The div tag is used to represent a division or a section of HTML code. A div is primarily used with CSS to adjust the layout of your web page.

  • Base Tag <div></div>
  • Tag display type Block
  • More Info

Block Element

Block level elements always start a new line and span the full width of available space 


    <div>
        <div>This is my first div</div>
            <div>
                This is my second div
            <p>
                Paragraphs are block elements too.
            </p>
        </div>
    </div>
This is my first div
This is my second div

Paragraphs are block elements too.

Span

The span tag has no visual change when used. The span tag can be used to apply styles to a specific block of text.

  • Base Tag <span></span>
  • Display type inline
  • More Info

Inline Elements

Inline elements do not start a new line. 


    <p>
        <span>These</span>
        <strong>are </strong>
        <span>all</span>
        <em>in different inline</em>
        <span>elements</span>
    </p>

These are all in different inline elements

More Info on Block Vs Inline

The Class attribute

The Class attribute is used to reference a class in a Style Sheet. You can also target an element by in JavaScript by its class.

  • Rules
  • Must start with a letter
  • Can be followed by other letters, numbers, hyphens and underscores
  • Elements can contain multiple classes



    
Title 1

    
Desc 1





    
Title 2

    
Desc 2

The ID attribute

Use the ID attribute to be able to specifically target an element. IDs must be unique. You will get inconsistent results if there are multiple elements with the same ID.

  • Rules
  • Must be unique
  • Cannot contain spaces
  • Casing matters when being target by CSS or JS

    <div id="site-header">
        <h1 id="myTitle">My Title</h1>
    </div>

Links

  • https://www.ascii.cl/htmlcodes.htm
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
  • https://google.github.io/styleguide/htmlcssguide.html
  • https://developers.google.com/web/

Create a Pen on codepen.io

Use the html we have learned and write the following

  • h1 -> Your Name
  • p -> About yourself
  • ul & li -> your career goals
  • a -> 2 or 3 links to websites you frequently go to.
  • Challenge: Change the font family, font size, color, hyperlink text color, and change the background color.

Extra Practice

HTML Exercises

>