FEEL THE HTML BURNING INSIDE OF YOU


OOOOOOOOOOOOH YEAH!!!!!!!!!



PRESENTERS


    KHURRAM VIRANI 
    @VIRANIK
<= way cuter

JULIAN SHAPIRO   
@SHAPIRO   

Today's Schedule


Presentation #1 (11:00AM)

Write Code, Hack, Etc!

Presentation #2 (3:30PM)

Finishing Touches & Publish!

... PROFIT

WE HAVE TWO SHORT LESSONS THIS MORNING


LESSON #1

OVERVIEW + HTML



LESSON #2

CSS



LESSON #1

OVERVIEW + HTML





What is coding?

And what does it mean to be a coder?

CODING IN REAL LIFE...


...versus coding in the movies.



Where does HTML come in?

How does it compare to CSS ?

TOO MUCH CSS



How do we write code?

Why don't we just code in Microsoft Word?




LEt's take a look at brackets

What does HTML look like inside  a code editor?


How does HTML work?

These are called angle brackets: <>.

Text inside of angle brackets is an HTML tag.


Everything else is just  text.




<section>This is normal text surrounded by HTML tags .</section>


You indicate a closing tag with a  forward slash.


This whole thing is an HTML element.

Let's pick apart SOME CODE


 <section>
<header>Khurram Virani</header>
<p>

<em>Bio</em>: Khurram is the head instructor at Lighthouse Labs in Vancouver.

<br />

<em>Email</em>: kvirani@lighthouselabs.ca

</p>
</section>

<section>: Separates a block of text from the rest of the page.
<header>: Defines the heading portion of a section.
<p>:  Creates a paragraph of text.
<em>: Emphasizes text (e.g. italicize it).
<br />: Inserts an empty line.



There are many types of HTML elements, including:
<HEADER>, <EM>, <BR />, <FOOTER>
EACH ELEMENT HAS ITS OWN SPECIFIC ROLE




THESE PRETZELS ARE MAKING ME THIRSTY.




So, we've learned about tags and elements.

You have two more concepts to learn before you can code HTML:

NESTING + ATTRIBUTES



Nesting


Nesting is the process of placing an HTML element inside another HTML element. 

In our example, our <em> tags were inside our <section> tag. Accordingly, this will be how the resulting web page is structured.

Nesting


Attributes


Attributes give elements superpowers.

Here's a normal HEADER element: 
<header>A sentence.</header>

And here's a HEADER element with a title attribute:
<header  title="This is a HEADER.">A sentence.</header>

SRC Attribute


The SRC attribute is how we get CAT PICTURES

The SRC attribute can only be used with the <IMG> element

The IMG element  doesn't take a closing tag because nothing can be placed inside of it.


<IMG SRC="http://funnyimages.com/dog.jpg" />

This will insert an image (of a dog, apparently) on the page at whatever location the <IMG> element is located. 


Attributes (continued)


Attributes are placed inside an element's opening tag.

They are placed after the tag's name.

They are structured as follows:  attribute="value"

You're assigning (=) a value to an attribute.

Notice how the value goes inside quotes.




LESSON #2

css

HTML defines the elements on a webpage, and CSS defines the design of those elements. Let's break that concept apart:


THE HOUSE ANALOGY:


Structure: Our house's scaffolding. 

Telling the web page that there's a block of text that should go within another block of text. 


Design: Our house's paint and decor. 

Telling the web page exactly how those pieces of text should actually look: what colour they are,  how big they are, etc.


CSS is a two-step process


1. It targets an element on a page.


2. It applies styles ("properties") to it.


Common CSS properties include:

color, font-size, text-align





Hi, my name is George. I'm unemployed and I live with my parents. –George Costanza

NOW LET'S CREATE THE CSS


CSS consists of rules. CSS rules are simple:

header  {
       color: green;
}

Just like with HTML attributes, we simply assign values to properties.

DIVING DEEPER INTO THE CSS


header  { <---- Opening curly bracket.
       text-align: center; <---- We use ":" instead of "=".
       color: green; <---- We don't put the value inside quotes.
}  <---- Closing curly bracket.

em  { <---- We're targeting an element with the ID of "contact".
       font-size: 20; <---- Then we're telling CSS how to style the font-size property.
       color: blue;
}

We place groups of CSS rules one after another.



To assign CSS properties to an HTML element, we must have a way of referencing the element.

Done by using an HTML attribute that assigns it a unique name.  The attribute that does this is called "ID".

Let's add an ID to our sample HTML code.




Alternatively, when we start with a pound-sign, we tell CSS to target elements with a given id:

#bio  {
       font-size: 20;
       color: blue;
}

ID vs class attribute


Use class instead of id when 
you have more than one element

id should be unique to the page
Only use it on one-of-a-kind elements

class should be used more frequently



class attribute


Instead of # symbol, we use a . (period) symbol 

em.special  {
       color: blue;
}

This will target:

<em class="special">Text here</em>



WHAT'S NEXT?


YOU HAVE TWO OPTIONS TODAY!

YOU CAN BUILD A RECIPE PAGE! OR! A RESUME!



IT'S NORMAL TO ENCOUNTER BUGS.

Debugging is a natural part of writing code.

Ask your teachers for help! That's why they're here :)



GET READY TO PAIR UP


We encourage pairing up. 
What is pair programming, you ask?




NOW, LET'S GET c-c-CODIN'!

HTML500 - Morning Presentation

By Khurram Virani

Made with Slides.com

HTML500 - Morning Presentation

  • 2,191

More from Khurram Virani