HTML & CSS

Introduction

By Mila Gerova

What is HTML?

HTML is the code that allows us to build websites

Terms

Web design

The process of planning, structuring and creating a website
Web development

The process of programming dynamic web applications
Front end

The outwardly visible elements of a website or application
Back end

The inner workings and functionality of a website or application.

Tools

Browser

Chrome

Firefox
Development Toolkit

Chrome - Inspector

Firefox - Firebug
Text Editor

TextWrangler - Mac

Notepad ++ - Windows

Sublime Text - Linux, Mac or Windows

gedit - Linux

Get Started: Folder Structure

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

Your Content

+ HTML: Structure

+ CSS: Presentation

= Your Website

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

Anatomy of an HTML element

Element
- An individual component of HTML
- Paragraph, heading, table, list, div, link, image, etc.
Tag
- Marks the beginning & end of an element
- Opening tag and Closing Tag
- Tags contain characters that indicate the tags purpose
```
    <tagname>Stuff in the middle</tagname>
```
```
    <p> This is a sample paragraph.</p>
```

Anatomy of an HTML element

Attribute
- Provides additional information about the HTML element
- Class, ID, language, style, identity, source
- Placed inside an opening tag, before the right angle bracket.

Value

Value is the value assigned to a given attribute.
Values must be contained inside quotation marks.

    <div id="copyright">© GDI 2013</div>
    <img src="my_picture.jpg" /> 
    <a href="http://girldevelopit.com">GDI</a>

Example

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 <p> inside of the <body> tags. The <p> is now nested inside the <body>

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

Whichever element OPENS first CLOSES last

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

Block vs Inline

After block elements, browsers render a new line.
Block elements: p, h1, ul, li, almost everything else
Inline elements: img, a, br, em, strong

ELEMENT: DIV

Block level element. Each new div is rendered on a new line.
A division, or section of content within an HTML page.
Used to group elements to format them with CSS.
Apply IDs and Classes to divs to control their styles with CSS.

    <div>
        <p>Content<p>
        <p>Content<p>
    </div>

    <div id="header">
        <h1>Main Heading<h1>
    </div>

    <div class="sub-content">
        <p>Some more content<p>
    </div>

Element: span

Inline element. Each new span is rendered next to each other & only wraps when it reaches the edge of the containing element.
Can be used to apply styles to text inline so as not to break the flow of content.

    <p>Paragraph with <span class="yellow">yellow</span> text.</p>

Paragraph with yellow text.

Examples

(to be used in the practice part later on)

    <a href="http://www.girldevelopit.com" title="Girl Develop It Homepage">GDI</a>

    <img src ="http://girldevelopit.com/pink-logo.png" alt = "Logo"/>

    <p>
        A paragraph with <em>Emphasized</em> text and <strong>Important</strong> text.
    </p>

Element: Unordered and ordered lists

    <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

Tables

Tables are a way to represent complex information in a grid format.

Tables are made up of rows and columns.

    <table>
        <tr> 
            <th>Head</th>
            <th>Head</th>
        </tr>
        <tr> 
            <td>Data</td>
            <td>Data</td>
        </tr>
    </table>

Head Head Data Data

Box model

Padding

    padding: 10px 20px 30px 40px;

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 does it look like?

    p {
        color: blue;
        font-family: 'Helvetica';
    }
    .red {
        color: red;
    }
    #special {
        font-family: Arial;
    }

    <p>Paragraph</p>
    <p class="green">Paragraph</p>
    <p class="red">Paragraph</p>
    <p class="red" id="special">Paragraph</p>

CSS Syntax

    selector {
        property: value;
    }

Selector: id and class

    #footer {
        property: value;
    }

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

    .warning {
        color: red;
    }

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

Property Values

    p {
      color: white;
      background-color: red;
      font-family: Arial, sans-serif;
    }

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

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

Connecting CSS to HTML

INLINE:

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

EMBEDDED:

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

LINKED:

    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

What does JavaScript do?

Example

    alert("hi there");

    var age = 20;
    if (age >= 35) {
        console.log('You can vote AND hold any place in government!');
    } else if (age >= 25) {
        console.log('You can vote AND run for the Senate!');
    } else if (age >= 18) {
        console.log('You can vote!');
    } else {
        console.log('You have no voice in government (yet)!');
    }

Empowering women of diverse backgrounds from around the world to learn how to develop software

Practice time!

Bootstrap

The most popular front-end framework for developing responsive, mobile first projects on the web.

By Laura Pérez @lpmayos

Why do we need to use a framework?

faster, easier and stronger front-end development
for all devices
for everybody

Wait, ok... what exactly is a front-end framework?

Frontend frameworks usually consist of a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.)

Include it in your project to automagically have a lot of stuff ready to use:

a fantastic grid system ready to work in all devices (for creating page layouts through a series of rows and columns that house your content)
a lot of awesome css styles: headers, navigation menus, colors, beautiful forms...
great javascript resources: modals, carousels, alerts...
...

And why Bootstrap?

easy and fun :)
beautiful, intuitive and powerful
well documented
sass and less support

take a look at others:

Zurb Foundation (nice web!) http://foundation.zurb.com Skeleton http://www.getskeleton.com/ HTML5 Boilerplate http://html5boilerplate.com/ HTML KickStart http://www.99lime.com ...

Great, what does Bootstrap offer?

Let's take a look at the Bootstrap website to see what kind of resources we can use.

CSS

responsive grid system
media queries
typography
code, tables, forms, buttons, images...
responsive utilities
less/sass (we won't talk about this today, but feel free to ask!)

Let's take a look

Components

glyphicons
dropdowns
buttons
navbars
pagination
alerts
...

Let's take a look

Javascript

carousel
modal
dropdown
scrollspy
tooltip
...

Let's take a look

HTML & CSS – Introduction – What is HTML?

lpmayos

HTML & CSS – Introduction – What is HTML?

0 0 (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); })();

bootstrap_workshop

HTML & CSS

Introduction

What is HTML?

Terms

Tools

Get Started: Folder Structure

Anatomy of an HTML element

Anatomy of an HTML element

Example

Nesting

Block vs Inline

ELEMENT: DIV

Element: span

Examples

(to be used in the practice part later on)

Element: Unordered and ordered lists

Tables

Box model

Padding

CSS: what is it?

CSS: what does it look like?

CSS Syntax

Selector: id and class

Property Values

Connecting CSS to HTML

What does JavaScript do?

Example

Empowering women of diverse backgrounds from around the world to learn how to develop software

Practice time!

Bootstrap

The most popular front-end framework for developing responsive, mobile first projects on the web.

Why do we need to use a framework?

Wait, ok... what exactly is a front-end framework?

And why Bootstrap?

take a look at others:

Great, what does Bootstrap offer?

CSS

Components

Javascript

Practice time!

Thank you :)

questions, complaints and beers are welcome

0 0