Intro to Web Development

Today

  • Review
  • Inline vs Block HTML Elements
  • Styling content with CSS

Let's Review...

Basic structure of an HTML page

            
              <!DOCTYPE html>
              <html>
                <head>
                </head>

                <body>
                </body>
              </html>

All HTML files start with a doctype.
This doctype states HTML5 is being used.

html tags

            
              <!DOCTYPE html>
              <html>
                <head>
                </head>

                <body>
                </body>
              </html>

The html tags tell the browser where to begin and end.

head tags

            
              <!DOCTYPE html>
              <html>
                <head>
                </head>

                <body>
                </body>
              </html>

Content placed within the head tags is not displayed.

Head tags store metadata. (Examples: a link to the site's CSS or a description of the site for search engines.)

body tags

            
              <!DOCTYPE html>
              <html>
                <head>
                </head>

                <body>
                </body>
              </html>

Content that will be displayed in the browser.

HTML Elements

Container HTML Element

Self-Closing HTML Element

Container HTML Element

<tagname>Hello World</tagname>

<open>Hello World</close>

            
              
Paragraph

            
          
            
              
Heading

            
          
            
              Google

Self-Closing HTML Element

<tagname attribute="value" attribute="value">

            
              image description

Resource for HTML Elements


Mozilla Developer Network - preferred resource ✅:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

W3Schools:

https://www.w3schools.com/tags

Reminders

  • All HTML files start with the HTML version: <!DOCTYPE html>
  • All HTML files use a basic structure that includes the <html>, <head>, and <body> tags.
  • Save html files with the '.html' extension.

Reminders

Indenting nested tags is important because it helps us identify where a tag begins and ends. Browsers ignore these extra spaces.

How we see our code:

            
              <body>
                
Indented paragraph tag

              </body>

How the browser reads our code:

            
              <body>
Indented paragraph tag
</body>

Block vs Inline HTML Elements

Example of block and inline html elements

Image from internetingishard.com

Block Elements

HTML tags that are Block elements: <p></p>, <li></li>, <h1></h1>


Example: <p> tag

Paragraph with a background color.

Inline Elements

HTML tags that are Inline elements: <a></a>, <em></em>, <img>


Example: <em> tag

This paragraph uses the inline <em> tag to italicize text. See how it fits right in with the flow of the text?

Example: <a> tag

First Link Second Link

Let's Code

Open Your Text Editor (Atom)

Steps to create an HTML file

File -> New File -> Save As -> index.html

Let's Code

Let's add a block element paragraph

Let's add an inline element

View your HTML in a browser

Open Chrome

File -> Open File -> index.html -> Open

Adding CSS to HTML

Laptop with HTML and CSS logos

Image from codercv.com

HTML vs CSS

Structure vs Presentation

Two houses that demonstrate the difference between html and css

What is CSS?

CSS stands for: Cascading Style Sheets

Cascading - CSS is written by defining "rules" and these rules can override each other. The "cascade" is responsible for determining which rule is applied to the HTML.

Style Sheets - refers to a file containing CSS code.
This language is used to describe the presentation of a web page.

What can CSS do?

CSS can change colors, fonts, and the position of content.

Example of how CSS can change the appearance of content.

What does CSS look like?

Example of CSS

Connecting CSS with HTML

Three ways to add CSS to HTML:

  • Inline
  • Embedded
  • External

Inline CSS

Use the HTML "style" attribute.

            
              

                A paragraph with a background color.

A paragraph with a background color.

Inline CSS

The "cascade" considers inline styles to be the highest priority. Inline styles are always applied over any other competing style.

However, Inline CSS styles:

  • encourage duplication
  • are tough to manage in a larger project
  • prevent styles from being shared with other HTML files

Inline CSS styles - not recommended ❌

Embedded CSS

Use the <style> tag inside the <head> tags.

            
              <!DOCTYPE html>
              <html>
                <head>
                  
                </head>

                <body>
                  
This text will be blue.

                </body>
              </html>

Embedded CSS

Allows CSS to be defined in the same file as the HTML file.

However, Embedded CSS styles:

  • encourage duplication
  • are tough to manage in a larger project
  • prevent styles from being shared with other HTML files

Embedded CSS styles - not recommended ❌

External CSS

Use the <link> tag inside the <head> tags.

            
              <!DOCTYPE html>
              <html>
                <head>
                  
                </head>

                <body>
                </body>
              </html>

External CSS

Separates the HTML from the CSS by writing CSS in a separate file.

External CSS styles:

  • reduces duplication
  • are easier to manage in a larger project
  • allow styles to be shared with other HTML files

External CSS styles - recommended! ✅

Let's Write Some CSS

IDE and browser

Image from internetingishard.com

Create a Project Folder

folder with two files

  1. On your desktop, create a folder called: website
  2. Open Atom
  3. Select File → Save As → index.html in the website folder.
  4. Select File → Save As → styles.css in the website folder.

Create an HTML document

Open the newly created index.html file.

Add the following HTML.

            
              <!DOCTYPE html>
              <html>
                <head>
                  Hello, CSS
                </head>

                <body>
                  
Hello, CSS

                  
CSS lets us style HTML elements.

                </body>
              </html>

View your website in a browser

Open Chrome

File → Open File → index.html → Open

How to Write CSS

HTML uses tags < >
CSS creates rules { }
Diagram of defining a CSS rule

Image from internetingishard.com

Let's add a CSS Rule

In the file styles.css, add the following:

            
              body {
                background-color: blue;
              }

Link the Stylesheet to HTML

Use the <link> tag to tell the HTML file to load a CSS file. 

            
              <head>
                
                Hello, CSS
              </head>

Breaking down the attributes...

  • rel - states the purpose (relationship) of the file
  • type - specifies the type of content in the file
  • href - provides the location of the file

The "Cascade" in action

            
              body {
                background-color: LightBlue;
              }

              body {
                background-color: plum;
              }

Let's talk Colors!

Colors can be referenced by:

  • a specific name (ex: LightBlue)
  • a hex value (ex: #ADD8E6)
powders with different colors

Image from blog.hubspot.com

Colors by Name

Approximately 147 color names are supported by all browsers.

A few examples include: LightBlue, Blue, Red, Purple, and Green.

Colors by Name

In the styles.css file, change the background color to a different color.

For color name options, visit: colors.commutercreative.com/grid 

            
              body {
                background-color: color-name-here;
              }

Colors by Hex Value

A hex value (short for hexidecimal value) looks like this: #ADD8E6

Hex values are a unique code that represent a color. This unique code is composed of six characters, using numerals and letters.

The leading "#" symbol declares "this is a hex value".

Colors by Hex Value

In the styles.css file, change the background color to a different color using a hex value.

For color hex values, visit either site:

            
              body {
                background-color: color-hex-value-here;
              }

Colors

Bonus:

Can you tell me if hex values case sensitive?
Does #add8e6 work the same as #ADD8E6?

Property: color

The color property sets the font color.

To change the font color, select the body and set the property color to a color value (color name or hex value). 

            
              body {
                background-color: color-value-here;
                color: color-value-here;
              }

Property: color

To change the header font color, select the header tag and set the property color to a color value (color name or hex value). 

            
              h1 {
                color: color-value-here;
              }

Property: font-family

The font-family property defines which typeface is used.

font-family accepts multiple values because not all browsers have the same fonts available.

In the example below, the browser tries to load the left-most value first (Helvetica), falls back to Arial if the font is not available and finally, chooses the system's default sans serif font. 

            
              p {
                font-family: "Helvetica", "Arial", sans-serif;
              }

Web Safe Font Stacks

Example of fonts on different systems:

Venn diamgram of fonts

There are five fonts that are truly universal:

Arial, Courier New, Georgia, Times New Roman, and Verdana

Web Safe Font Stacks

List of web safe font stacks: https://www.w3schools.com/cssref/css_websafe_fonts.asp

Serif vs Sans-Serif Font

The small features on the ends of strokes are known as "serifs".

Example of serif and sans-serif fonts

Image from about.easil.com

Common Serif typefaces include: Times New Roman, Georgia, Palatino and Garamond.

Common Sans Serif typefaces include: Arial, Helvetica and Tahoma.

Property: font-family

Let's pick out a font stack!

Custom Font

Externally hosted fonts allow us to use fonts that our user's systems aren't likely to have installed.

  1. Visit Google Fonts at: fonts.google.com
  2. Select a font and copy the provided HTML. The provided HTML will being with a <link> tag.
  3. Add this copied HTML to the index.html file, between the <head> tags.
  4. Copy the provided CSS, which will begin with the property font-family.
  5. Add this copied CSS to the styles.css file, specifically to the body selector.

Property: font-size

A "px", or pixel, is a unit of measurement when discussing a graphical display, like a computer screen.

Screen display resolution is often expressed in the unit of pixels. Example: A "800 x 600" pixel resolution means that 800 pixels can be displayed in width and 600 pixels in height. 

            
              body {
                font-size: 20px;
              }

Coming up next class...

CSS Classes and IDs

Container Divs

CSS Box Model