Triangle Techgirlz Building a Website

Tools

Browser Chrome Firefox
Text EditorTextWrangler - MacNotepad ++ - Windows

What is HTML?

HTML is the code that allows us to build websites

What is HTML?

If you 'view the source', you see this

HTML is Markup

Photo credit: Nic's events cc

CSS is Style

Photo credit: pumpkincat210 cc

What goes into a website?

Your Content+ HTML: Structure+ CSS: Presentation= Your Website

A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.

What does the code look like?

A paragraph is your content

Putting your content into an HTML tag to make it look like a paragraph is structure

                <p>A paragraph is your content</p>

Make the font of your paragraph blue and 18pt is presentation

A paragraph is your content

HTML Elements

Element
- An individual component of HTML
- Paragraph, heading, table, list, div, link, image, etc.
Tag
- Marks the beginning & end of an element
- Come in pairs: the opening and the closing tags
- Each different type of element has a different name
```
<tagname>Stuff in the middle</tagname>
```
```
 This is a sample paragraph.
```

Tag Breakdown

Types of elements

Container Element
- An element that holds words or other elements
- A paragraph () contains text
Stand Alone Element
- An element that can't hold anything else
- ```
 
<img/>
```

You try it!

Download the practice files
Unzip them on your desktop
Open index.html with your text editor.
Try changing things
Don't be afraid to ask for help!

Paragraph:

  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>

  <p>Paragraph 1</p> <p>Paragraph 2</p>  <p>Paragraph 3</p>

  <p>Paragraph 1</p> 
  
  
  <p>Paragraph 2</p>  
  <p>Paragraph 3</p>

Paragraph 1

Paragraph 2

Paragraph 3

* You can add as much or as little space as you want in your code. It all looks the same!

Heading: <h#>

  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

* Headings are for organization, not size

Strong: and Emphasis:

<p>
  Here is a paragraph with <em>Emphasized</em> text and <strong>Important</strong> text.
</p>

Here is a paragraph with Emphasized text and Important text.

Lists: <ul> or <ol> and <li>

  <ul>
    <li>List Item</li>
    <li>AnotherList Item</li>
  </ul>

  <ol>
    <li>List Item</li>
    <li>AnotherList Item</li>
  </ol>

Unordered list (bullets)

List Item
AnotherList Item

Ordered list (sequence)

List Item AnotherList Item

Nesting

All elements "nest" inside one another

Nesting is what happens when you put other containing tags inside other containing tags. For example, you would put the inside of the <body> tags. The is now nested inside the <body>

Whichever element OPENS first CLOSES last

Nesting: Example

Elements are 'nested' inside the <body> tag.

        	<body>
        	   <p>A paragraph inside the body tag</p>
        	</body>

Paragraphs 'nested' inside list items.

        	<ul>
        	   <li>
        	      <p>A paragraph inside a list item</p>
        	   </li>
        	</ul>

You try it!

Look at the code and find:

Paragraph
Heading
List
Strong or emphasized text

Attributes

Provides extra information about the HTML element
Placed inside an opening tag, before the right angle bracket.

Values

Values go with attributes.
Values need quotation marks.

<div id="copyright">© Techgirlz 2015</div>
<img src="my_picture.jpg" /> 
<a href="http://www.techgirlz.org/">Techgirlz</a>

Links: <a>

Links have two components

Tag: <a></a>
Href attribute: "http://www.techgirlz.org/"

<a href="http://www.techgirlz.org/">Techgirlz</a>

Techgirlz

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 things, like open in a new tab or launch your e-mail program.

<a href="http://google.com" target="_blank">Link Text</a>

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

<a href="mailto:info@techgirlz.org">E-mail us!</a>

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

You try it!

Find a link on the page
Find a link in the code
Try changing it to go to http://google.com
Got it? Try adding a link to your favorite site.

Images: <img>

Images have three components

Tag: <img/>
Src attribute: "techgirlz-logo.png"
Alt attribute: "Techgirlz Logo"

<img src ="techgirlz-logo.png" alt = "Techgirlz Logo"/>

Relative Paths

Relative paths change depending upon the page the link is on.

If something is in the same folder, just use the name "techgirlz-logo.png"
If it is inside another folder, include the folder name. "images/techgirlz-logo.png"

Absolute

Absolute paths refer to a specific location of a file, including the entire website. "https://www.google.com/images/srpr/logo11w.png"
You usually use these when you are going outside your website.

You try it!

Find the picture on the page
Find the picture in the code
Try changing it from turtle.jpg to kitten.jpg
Got it? Try adding a picture from your computer

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.

CSS: What can it do?

All colored text, position, and size

CSS: What does it look like?

The CSS Rule

selector {
   property: value;
}

A block of CSS code is a rule.

The rule starts with a selector.

It has sets of properties and values.

A property-value pair is a declaration.

You try it!

At the top of your index.html, you'll see a line that looks like this:

<!-- <link rel="stylesheet" href="style.css"> -->

Take out the  so it looks like this:

<link rel="stylesheet" href="style.css">

Save and reload the page. See how it changes!

Reusing code

As a general coding principle, Don't Repeat Yourself.

To reuse CSS, we use IDs and classes.

Photo credit: Yo Mostro cc

What is the difference?

Photo credit: IronRodArt cc

IDs vs. Classes

ID -- Should only apply to one element on a webpage, e.g., a webpage only has one footer.

The "#" is how you tell CSS "this is an id."

Class -- Lots of elements can have the same class, e.g., there can be many warning on one webpage.

The "." is how you tell CSS "this is a class name."

CSS Syntax

Declarations: Property and value of style you plan use on HTML element.

Declarations end with a semicolon

Declaration groups are surrounded by curly brackets.

selector {
  property: value;
  property: value;
  property: value;
}

Selector: Element

p {
  property: value;
}

Selects all paragraph elements.

img {
  property: value;
}

Selects all image elements.

Selector: ID

#footer {
  property: value;
}

Selects all elements with an id of "footer".

<p id="footer">Copyright 2011</p>

The associated HTML.

Selector: Class

.warning {
  color: red;
}

Selects all elements with a class of "warning".

<p class="warning">Run away!</p>

The associated HTML.

Selector: Position

p em {
  color: yellow;
}

Selects all em elements that are within a paragraph

<p>This is <em>important.</em></p>

The associated HTML.

Property: Color

The color property changes the color of the text.

p {
  color: red;
  color: #ff0000;
  color: rgb(255, 0, 0);
}

Color name

Hexadecimal value

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.

You try it!

Open up styles.css
At the bottom, there are some empty blocks. Add your own code!
Try changing the color of paragraphs

Property: 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);
}

Property: Background-image

The background-image property lets you use an image as a background.

body {
  background-image: url("kitten.jpg");
}

Property: Font-size

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

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

Pixels

"em"

Percentage

Property: Border

This adds borders to elements

p {
    border: 4px solid black;
}

Size

Style (solid, dashed, dotted, etc.)

Color

You try it!

Keep changing styles.css
Try changing the color, size, and borders of elements
Want to try something else? Ask your coach!

Building a Website ~ Triangle Techgirlz ~

Triangle Techgirlz Building a Website – Tools – What is HTML?

Roenok

Triangle Techgirlz Building a Website – Tools – What is HTML?

0 1 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

triangle-techgirlz-htmlcss

Triangle Techgirlz Building a Website

Tools

What is HTML?

What is HTML?

HTML is Markup

CSS is Style

What goes into a website?

What does the code look like?

HTML Elements

Tag Breakdown

Types of elements

You try it!

Paragraph: <p>

Heading: <h#>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Strong: <strong> and Emphasis: <em>

Lists: <ul> or <ol> and <li>

Nesting

Nesting: Example

You try it!

Attributes

Values

Links: <a>

Link Attributes

You try it!

Images: <img>

Relative Paths

Absolute

You try it!

CSS: What is it?

CSS: What can it do?

CSS: What does it look like?

The CSS Rule

The CSS Rule

You try it!

Reusing code

What is the difference?

IDs vs. Classes

CSS Syntax

Selector: Element

Selector: ID

Selector: Class

Selector: Position

Property: Color

You try it!

Property: Background-color

Property: Background-image

Property: Font-size

Property: Border

You try it!

0 1