HTML101: Intro to HTML & CSS

View Github Repository Open presentation in a new window

gdiSLC

See all presentation from gdiSLC

HTML101: Intro to HTML & CSS

0 0

intro-to-html-css

On Github gdiSLC / intro-to-html-css

Show navigation

HTML101: Intro to HTML & CSS

Welcome!

Some "rules"

  • We are here for you!
  • We love your questions
  • Help each other
  • Try to avoid:
    • Feigning surprise
    • Well-actually's
  • Have fun

Tell us about yourself.

  • Who are you?
  • What do you hope to take home from this class?
  • What is your favorite thing to do when you have some free time?

Get Started: Folder Structure

All the files for your site should be stored within the same folder.

This includes:

  • HTML Files
  • CSS Files
  • Images
  • Script files
  • Anything else that will appear on your site

Note: File names should not include spaces or special characters. File names ARE case sensitive.

What is HTML?

HTML (HyperText Markup Language)is the code that allows us to build websites

Basic HTML

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

    <body>
    </body>
</html>

Why New Elements - HTML5?

  • SEO & Search Engines
  • Web Accessibility
  • Code is for humans too

 

HTML5 New Semantic Elements

Let's Talk About Semantics

Attributes & Values

  • Attribute
    • Class, id, language, style, identity, source
    • Allows you to add more info to the element
    • Placed inside an opening tag, before the right angle bracket.
		              			
<img src="my_picture.jpg" /> 
<a href="http://girldevelopit.com">GDI</a>
<section id="copyright">© GDI 2013</section>
<section class="important">Remember!</section>
Value
  • Value is the value assigned to a given attribute.
  • Values must be contained inside quotation marks.

Element: Link

Links have three components

  • Tag: <a></a>
  • Href attribute: "http://www.girldevelopit.com"
  • Title attribute: "Girl Develop It"
<a href="http://www.girldevelopit.com" title="Girl Develop It Homepage">GDI</a>

GDI

The <a> tag surrounds text or images to turn them into links

Link Attributes

Links can have attributes that tell the link to do different actions like open in a new tab, or launch your e-mail program.

<a href="http://bit.ly/NDTPQJ" target="_blank">GDI SLC Meetup</a>

GDI SLC Meetup

Link opens in a new window/tab with target="_blank"

<a href="mailto:saltlakecity@girldevelopit.com">E-mail us!</a>

E-mail us!

Link opens mail program by inserting mailto: directly before the email address.

CSS: What is it?

CSS = Cascading Style Sheets

CSS is a "style sheet language" that lets you style the elements on your page.

CSS is works in conjunction with HTML, but is not HTML itself.

The CSS Rule

Connecting CSS to HTML

3 ways

"External"

"Embedded"

"Inline"

Connecting CSS to HTML: External/Linked

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Shared resource for several pages.

Reduced file size & bandwidth

Easy to maintain in larger projects.

Preferred by coders everywhere!

Connecting CSS to HTML: Embedded

<head>
  <style type="text/css">
    p {
      color: blue;
      font-size: 12px;
    }
  </style>
</head>

Inside <head> element.

Uses <style> tag.

Can only be used in one html file

Connecting CSS to HTML: Inline

  <p style="color:red;">Some text.</p>

Uses the HTML attribute style.

Difficult to use in large projects

Not preferred.

Border

The edge around the box, specified as "thickness, style, color."

Border

A solid red border

  border: 1px solid #ff0000;

A thick dotted black top border

  border-top: 4px dotted #000000;

Two different border styles

  border-top: 1px solid #ff0000;
  border-bottom: 4px dotted #000000;

Property: Width

Sets the width of an element.

Does not include padding or borders. These add to the width.

body {
  width: 900px;
}

Property: Height

Sets the height of an element.

Does not include padding or borders. These add to the height.

body {
  height: 900px;
}

Inline vs Block

So far, we have mostly seen "block" elements. They appear on the next line, like paragraphs

<p>, <h1>, <ul>, <li>, almost everything else

There are also "inline" elements. They appear on the same line that they are written on.

<img>, <a>, <br>, <span>, <em>, <strong>, etc.

Float: Example

"Floating" an element moves it, in the normal flow, as far to the left or right of its parent element as possible.

Above a <blockquote> is floated to the left, allowing text to wrap around it on the right

Float: Wrapping

Any other elements, such as paragraphs or lists, will wrap around the floated element.

  .float{
     float:left;
     width:200px;
     background:yellow;
  }
Hi, I'm a yellow box with black text. I like to hang out on the left side.
Not floating element
Not floating element
Not floating element with wrapping Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Using floats to place elements side by side

If you want two block level elements to be side by side, you need to float both elements. One left, and one right.

Always specify a width when floating an element, otherwise the element is likely to take up the whole page and not appear floated.

Alternates to Float

CSS3 FlexBox

Clear

  • Tells the element on which side (right, left, both) other elements cannot appear.
  • Clearing both sides makes sure floats don’t flow past the clear element.
  clear: right;
  clear: left;
  clear: both;

Clear

If you had an image, div, etc. floated left, and you did not want the paragraph to appear next to it, you would add clear: left; to the paragraph.

   .float{
     float:left;
     width:50px;
     background:yellow;
   }
   .clear-left{
     clear:left
   }
hi hi hi
Not floating element
Not floating element
Non-floating element with a style of clear: left;

Font-family

The font-family property defines which font is used.

p {
  font-family: "Times New Roman";
  font-family: serif;
  font-family: Arial, sans-serif;
}

Specific font name

Generic name

Comma-separated list

Only have to use quotation marks ("") when the name has spaces

Info on Fonts & Accessibility

Property: Font-size

The font-size property specifies the size of the font.

p {
  font-size: 12px;
  font-size: 1.5rem;
  font-size: 100%;
}

Pixels

"rem" or "em"

Percentage

More Info on Font-Size

Fonts (shorthand)

p {
  font-style: italic;
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
}

OR

p {
  font: italic bold 10px sans-serif;
}

Padding

Space between the border and the content

Adds to the total width of the box.

Padding

20 pixels* on top only

padding-top: 20px;

20 pixels on right only

padding-right: 20px;

20 pixels on bottom only

padding-bottom: 20px;

20 pixels on left only

padding-left: 20px;

*Like font-size, you can also use em, rem, or percentages

Padding

15 pixels on all sides

padding: 15px; /* All sides */

20 on top, 15 on right, 13 on bottom, 25 on left

padding: 20px 15px 13px 25px; /* Top, Right, Bottom, Left */

10 on top/bottom, 45 on right/left

padding: 10px 45px; /* Top/Bottom Right/Left */

Padding

  padding: 10px 20px 30px 40px;

Margin

The transparent area around the box that separates it from other elements.

Margin

One side

margin-top: 10px; /* 10 pixels on top */

All sides

margin: 15px; /* 15 pixels on all sides */

Top, Right, Bottom, Left

margin: 10px 5px 3px 5px; /* 10 on top, 5 on right, 3 on bottom, 5 on left */

Top/Bottom, Right/Left

margin: 10px 20px; /* 10 on top/bottom, 20 on right/left */

Auto Margin

If a margin is set to auto on a box that has width, it will take up as much space as possible.

CENTERED

  margin: auto;
  width: 300px;

FLUSH-RIGHT

  margin-left: auto;
  margin-right: 5px;
  width: 300px;

Text-Align

Aligned left (default)

text-align: left;

Aligned right

text-align: right;

Aligned center

text-align: center;

Justifying all of the text

text-align: justify;

Line-Height

Unitless (multiply this number by the font-size)

line-height: 1.5;

Using rem or em's

line-height: 1.5em;

Using percentages

line-height: 150%;

Span

Span is used to apply a specific style inline

.yellow {
  color: yellow;
}
					
<p>Paragraph with <span class ="yellow">yellow</span> text.</p>

Paragraph with yellow text.

Color

The color property changes the color of the text.

p {
  color: red; /* Color name */
  color: #ff0000; /* Hexadecimal value */
  color: rgb(255, 0, 0); /* RGB value */
}

The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Find some colors: ColorPicker

Background-color

The background-color property changes the color of the background.

p {
  background-color: black;
  background-color: #000000;
  background-color: rgb(0,0,0);
}

Pseudo-classes (links)

CSS pseudo-classes are used to add additional functionality to some selectors.

  a:link { color:#FF0000; } /* unvisited link */
  a:visited { color:#00FF00; } /* visited link */
  a:hover { color:#FF00FF; } /* mouse over link */
  a:active { color:#0000FF; } /* selected link */

Note: a:hover MUST come after a:link and a:visited in order to be effective!

Note: a:active MUST come after a:hover in order to be effective!

Learn more about Pseudo-Classes

Text-Decoration

Underlined

text-decoration: underline;

Overline

text-decoration: overline;

Line through your text

text-decoration: line-through;

Shorthand*

text-decoration: underline wavy red;

*Currently only supported in Firefox & Safari

Div

Div is a block level element. Each new div is rendered on a new line. It has no semantic meaning. Used to group elements to format them with CSS. 

<div>
   <p>Content<p>
   <p>Content<p>
</div>
					
<div id="header-group">
   <header>
     <h1>Main Heading<h1>
   </header>
   <nav>
     <ul><li>Home</li></ul>
   </nav>
</div>

Apply IDs and Classes to divs to control their styles with CSS.

Relative vs. Absolute paths

  • Relative
    • Relative paths change depending upon the page the link is on.
      • Links within the same directory need no path information. "filename.jpg"
      • Subdirectories are listed without preceding slashes. "images/filename.jpg"
  • Absolute
    • Absolute paths refer to a specific location of a file, including the domain. "http://www.girldevelopit.com/chapters/detroit"
    • Typically used when pointing to a link that is not within your own domain.

Questions? Contact Me

Email: stacie@girldevelopit.com

Twitter: @FarmerCode

Come to our next GDI event!

HTML101: Intro to HTML & CSS -- Girl Develop It SLC