HTML & CSS
Introduction
By Mila Gerova
What is HTML?
HTML is the code that allows us to build websites
Terms
-
Web designThe process of planning, structuring and creating a website
-
Web developmentThe process of programming dynamic web applications
-
Front endThe outwardly visible elements of a website or application
-
Back endThe inner workings and functionality of a website or application.
Tools
-
BrowserChromeFirefox
-
Development ToolkitChrome - InspectorFirefox - Firebug
-
Text EditorTextWrangler - MacNotepad ++ - WindowsSublime Text - Linux, Mac or Windowsgedit - Linux
Get Started: Folder Structure
All the files for your site should be stored within the same folder.
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>
<head>
<style type="text/css">
p {
color: blue;
font-size: 12px;
}
</style>
</head>
<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.)
- 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!)
Components
- glyphicons
- dropdowns
- buttons
- navbars
- pagination
- alerts
- ...
Javascript
- carousel
- modal
- dropdown
- scrollspy
- tooltip
- ...
Practice time!