Programming WTF: HTML & CSS

Programming wat the f*ck!?

FRANCISCO RIBEIRO MARTINHO ARAGÃO PAULO CARDOSO martinhoaragao.me FERNANDO MENDES @fribmendes
@frmendes @FranciscoRibeiro @pcardosolei

HTML Hyper Text Markup Language

HTML Hyper Text Markup Language Not really programming™. Sorry :(

<html> </html> <!DOCTYPE html> Tags remember those, we’re going to
use them a lot

HTML head body

<html> </html> <!DOCTYPE html> <head> </head> <body> </body> Language Language

<html> </html> <!DOCTYPE html> <head> </head> <body> </body> Language Title
Language

Language Author

Language Author Info Links Style

Language Author Info Links Style Metadata

TITLE <title>My first webpage</title> Sets the page’s title

META <meta name="author" content="CeSIUM"/> More Meta-information Search engines say “thank
you”

<html> </html> <!DOCTYPE html> <head> </head> <body> </body> pretty much
everything

SHOWTIME

1. Create a directory with an index.html file. All code
goes here. 2. Add the DOCTYPE and html tags. 3. Add the head and the body tags. 4. Set the title to “My first webpage”. 5. Add a tag that tells us you’re the author. 6. Use ‘utf-8’ as the charset. 7. Write something in the body. EX 1

1. Create a directory with an index.html file. All code
goes here. 2. Add the DOCTYPE and html tags. 3. Add the head and the body tags. 4. Set the title to “My first webpage”. 5. Add a tag that tells us you’re the author. 6. Use ‘utf-8’ as the charset. 7. Write something in the body. Tips: 1. Drag the ﬁle to your browser to open it. 2. Go slow and refresh when you add something new! 3. The favicon is here: http://bit.ly/1qmRtbB You’ll need it! :) 4. Check mdn if you need to know what’s inside a tag:  https://developer.mozilla.org 5. Call for us and ask us questions! We love attention! EX 1

<!DOCTYPE html> <html> <head> <title>My first webpage</title> <meta charset="utf-8"/> <meta
name="author" content="CeSIUM"/> <link rel="icon" href="favicon.ico"/> </head> <body> Hello, world! </body> </html> EX 1

Think of MS Word’s title <h1>This is a heading</h1> HEADINGS

Think of MS Word’s subtitle <h1>This is a heading</h1> <h2>This
is also a heading</h2> HEADINGS

<h1>This is a heading</h1> <h2>This is also a heading</h2> <h3>And
this</h3> Uh… Does anyone know if MS Word has subsubtitles? HEADINGS

<h6>It’s headings all the way down!</h6> … <h1>This is a
heading</h1> <h2>This is also a heading</h2> <h3>And this</h3> HEADINGS

<p>This is a paragraph</p> PARAGRAPHS

<p>This is a paragraph</p> <p> This is also a paragraph
</p> PARAGRAPHS

<p>This is a paragraph</p> <p> This is also a paragraph
</p> But this isn’t. Try to do this! Add the previous code to your index.html ﬁle PARAGRAPHS

ANCHORS <a href=“http://cesium.di.uminho.pt”>Our website!</a> You may know them as “links”

<a href=“http://cesium.di.uminho.pt”>Our website!</a> meet attributes! Attributes add invisible information for
some tags to work. ANCHORS

LISTS <ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol> <ul>
<li>An Item</li> <li>Another Item</li> <li>Also an Item</li> </ul> Lists can be ordered or unordered

1. First Item 2. Second Item 3. Third Item •
An Item • Another Item • Also an Item Lists can be ordered or unordered LISTS

<ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol> <ul> <li>An
Item</li> <li>Another Item</li> <li>Also an Item</li> </ul> “Main” tag tells us the list type List is only visible when we add list items: <li> LISTS

1. Add a heading to index.html. Make it about your
personal webpage. 2. Create an unordered list. 3. Each list item should be a (smaller) heading and a paragraph. 4. Make it so that each heading is inside an anchor. EX 2

<body> <h1>CeSIUM</h1> <ul> <li> <a href=“#”><h2>Meet CeSIUM!</h2></a> <p>We’re a friendly
bunch!</p> </li> <li> <a href=“#”><h2>We love what we do</h2></a> <p>Which is basically play XBox all day…</p> </li> </ul> </body> EX 2

IMAGES <img src=“img/profile.png“/> We don’t need to add any content
to an image. So, it’s a self-closing tag! Source can also be a URL

DIV <div><p>We can add more content here!</p></div> Divs are containers.
They keep a bunch of elements together as group. Also, they’re usually just boxes.

Wait, what? Nothing changed DIV

<div style=“border: 1px solid black”> <p>We can add more content
here!</p> </div> Don’t mind this, it’s just CSS. We’ll deal with that later. DIV

1. Wrap the body content in a div. Don’t forget
to indent! 2. Before the div you just added, create a another. 3. Add an image and a small bio inside this new div.  Remember you can use a URL for the image source! EX 3

<body> <div> <img src=“img/logo.png”/> <p>CeSIUM: Awesome since 1995</p> </div> <div>
<h1>CeSIUM</h1> <ul> <li> <a href=“#”><h2>Meet CeSIUM!</h2></a> <p>We’re a friendly bunch!</p> </li> <!—- And so on… —-> </ul> </div> </body> EX 3

So far… Think of HTML like the blueprint of a
house… We have everything in place but it isn’t very pretty, is it?

CSS Cascading Style Sheets

SYNTAX selector { attribute: value; }

selector { attribute: value; } Make every paragraph red and
with a 16 pixel size p { color: red; font-size: 16px; } SYNTAX

SELECTORS div { ... } Element selector Applies style to
every element of kind <div> Applies to me! </div> <p> Not to me! </p>

SELECTORS #id { ... } Id selector Applies style to
that particular element <div id=“myDiv”> Applies to me! </div> <div> Not to me! </div> div { ... } Element selector Applies style to every element of kind <div> Applies to me! </div> <p> Not to me! </p>

SELECTORS .red { ... } Class selector Applies style to
every element of class <div class=“red”> Applies to me! </div> <p class=“red”> And to me! </p> #myDiv { ... } Id selector Applies style to that particular element <div id=“myDiv”> Applies to me! </div> <div> Not to me! </div> div { ... } Element selector Applies style to every element of kind <div> Applies to me! </div> <p> Not to me! </p>

TEXT p { font-family: ‘Open Sans’, sans-serif; font-size: 16px; }
Tries the first one. If the font isn’t available goes to the next

IMG img { height: 150px; width: 150px; } Usually one
is enough to keep the aspect ratio

1. Remember the divs we added? Add a class called
info to the first one  and a class called content to the second one. 2. Add an id to the image. Name it whatever you want,  but make it suggestive enough for everyone to understand! 3. Change the font-family of every paragraph to ‘Open Sans’. 4. Do the same for every heading (remember we have h1 and h2),  but set it to ‘Oswald’ instead! Make them 30px and 24px respectively. 5. Make the img have a width of 150px. Tips: 1. Google Fonts is a great source of awesome fonts!  Both Oswald and Open Sans can be found there. 2. Add the fonts to your collection. 3. Add the resulting link tag to your index.html ﬁle EX 4

<body> <div class=“info”> <img id=“logo” src=“img/logo.png”/> <p>CeSIUM: Awesome since 1995</p>
</div> <div class=“content”> <h1>CeSIUM</h1> <ul> <li> <a href=“#”><h2>Meet CeSIUM!</h2></a> <p>We’re a friendly bunch!</p> </li> <!—- And so on… —-> </ul> </div> </body> EX 4

p { font-family: 'Open Sans', sans-serif; } h1, h2 {
font-family: 'Oswald', sans-serif; } h1 { font-size: 30px; } h2 { font-size: 24px; } #logo { width: 150px; } body { /* Small trick to have simple * browser compatibility */ margin: 0; padding: 0; } EX 4

SELECTORS II .content p { ... } <div class=“content”> <p>
Applies to me! </p> </div> <p> Not to me! </p>

.content div p { ... } Element selector <div class=“content”>
<div> <p> Applies to me! </p> </div> <p> Not to me! </p> </div> SELECTORS II

.content a:hover { ... } <div class=“content”> <a> Applies to
me! But only when the cursor is on top of me! </a> </div> SELECTORS II

p { font-style: italic; text-decoration: underline; } TEXT II

a { font-weight: bold; text-decoration: none; } TEXT II

a { color: red; } TEXT II

a { color: rgb(244, 67, 54); } TEXT II

a { color: #F44336; } TEXT II

1. Make the paragraphs inside .info italic. 2. Make the
heading inside .content underlined 3. Have the anchors inside the list turn #0288D1. Remove their underline.  When hovered turn them #29B6F6. EX 5

.info p { font-style: italic; } .content h1 { text-decoration:
underline; } .content ul li a { color: #0288D1; text-decoration: none; } .content ul li a:hover { color: #29B6F6; } EX 5

MARGIN

div { /* So we can see the result*/ border:
1px solid black; margin: 10px; } MARGIN

MARGIN

div { border: 1px solid black; margin: 10px 20px; }
MARGIN

div { border: 1px solid black; margin: 10px 20px 5px
15px; } MARGIN

div { border: 1px solid black; margin-top: 10px; /* ...
*/ } MARGIN

div { border: 1px solid black; margin: 10px; padding: 10px;
} PADDING

PADDING

div { width: 30%; display: inline-block; } Display

Display

1. Put the .info div inline, with a width of
250px.  Vertical margin should be 20px and horizontal should be 10px. 2. Do the same for the .content div but don’t limit its width. EX 6

1. Put the .info div inline, with a width of
250px.  Vertical margin should be 20px and horizontal should be 10px. 2. Do the same for the .content div but don’t limit its width. .info { display: inline-block; margin: 10px 20px; width: 250px; } .content { display: inline-block; margin: 10px 20px; } EX 6

OTHER TAGS .content { display: inline-block; margin: 10px 20px; }

.content { display: inline-block; margin: 10px 20px; vertical-align: top; }
OTHER TAGS

OTHER TAGS

.content ul { list-style-type: none; } OTHER TAGS

OTHER TAGS

1. Wrap the current content of the body inside a
div. 2. Add a div before the newly created one.  Keep it empty and add a class of hero-container. 3. Add a width of 100%, height of 250px and separate it from the other div.  The distance should be 25px. EX 7

<body> <div class="hero-container"></div> <div> <div class=“info”> <!—- ... —-> </div>
</div> </body> .hero-container { width: 100%; height: 250px; margin-bottom: 25px; } EX 7

BACKGROUND .hero-container { background-color: #333333; }

.hero-container { background-image: url(../img/hero.png); } We are telling the CSS
ﬁle where to look for the image Don’t forget to create this directory and file BACKGROUND

BACKGROUND

.hero-container { background-size: cover; background-position: center; } BACKGROUND

BACKGROUND

Programming wat the f*ck!?

Programming WTF: HTML & CSS

Programming WTF: HTML & CSS

More Decks by Fernando Mendes

Other Decks in Programming

Featured

Transcript