Intro to HTML & CSS

 



Presented By:

Tiffany Tse

  @tiffany_tse


Special Thanks

Making Makers

Mozilla Thimble

Create an Account on 

thimble.mozilla.org

  • Create an account on https://thimble.mozilla.org  

  • Click “Create Account” in the top right and type in a username, email address and password for your account

  • If you don't have an email address you can sign in with:

username:      adventures
password:       Pa55word

The Internet

How do you think a webpage is made?


  • Did someone draw it on paper and then scan it into a computer?

  • Did someone make it using a word processor (like Microsoft Word)?
               
  • Did someone yell at the computer until it made a website?

Nope!


The internet is made with CODE!

HTML

  • Websites are created using a language called HTML

  • HTML stands for: Hyper Text Markup Language

  • Browsers don’t understand English. So we use HTML in order to communicate

  • When we use HTML, we are telling our browser information about our webpage and what kind of content to display

How do we read and write HTML?

Tags

  • We use tags to start and stop a dialogue with our browser

<something> content goes here </something>

Head

  • The <head> </head> tags display information about our webpage. One example of this is a title

  • A title refers to the text you see at the top of a webpage, in a tab, or even in Google search result

Title

In between the open and closed head tags, edit the title to the following:

<title> Welcome to my awesome website! </title>

What kinds of things do you see on a webpage?

Paragraph

<p> 
   This is a paragraph. We can write all kinds of
   stuff in here! 
</p>

<p> 
   This is a paragraph. We can write all kinds of
   stuff in here! 
</p>



  • An opening tag tells the browser what is about to follow. 
  • In this case, <p> stands for paragraph

Describe what your site is all about in a paragraph

Remember...

  • Computers are picky (and also pretty dumb)!
  • Always open < > and close </ > each tag, or your computer will think you’re speaking a foreign language!

Debugging Time!


What’s wrong with this?


p> this is my paragraph </p

Tags with attributes

  • The <a> tag (also known as an anchor), tells a browser to link to another webpage. 
  • But how does it know what URL to link to?!

Attributes

  • We need to tell the browser more information - to do this, we use an attribute href is an attribute and stands for hypertext reference

  • In the example below, “http://www.google.ca” is the value of the href attribute and is the URL the link will direct to

< a href = “ http://www.google.ca” >
   Click me to go to Google
</a>

Add a link to a website

Images

  • Images use the <img> tag and like links, also need attributes

  • The src attribute (meaning source) tells the browser where to find our image


<img src = "http://girlslearningcode.com/banner.png" >

Add your own image

  • Open up Google and search for your own image!

  • Once you’ve found an image you like, select it and then click “View image” 
  • Copy the image’s URL, and paste it as your image source


Try combining these two to create an image link

Image Links

To create an image that is linked to a URL 

  • Put the image tag and it’s src attribute inside the opening link tag with it’s attribute and the closing link tag

Answer


<a href=”http://www.google.ca” >
       <img src=”http://girlslearningcode.com/banner.png >
</a>

Are you ready for CSS?

CSS

  • CSS is our way of making our HTML look pretty!

  • CSS stands for: Cascading Style Sheets

  • In a nutshell, HTML handles content while CSS handles design

  • Where do we put CSS?

CSS

  • Remember the <head> </head> tags we created in HTML? 

  • CSS must go somewhere in between those two tags (normally we see it at the bottom, just inside the head, after the <title>)
  • To tell the browser that we are going to start using CSS we use the <style> tag
  • To tell the browser we are going to stop using CSS we use the </style> tag
<html> We’re going to start communicating with you using HTML!

     <head> Information about our webpage starts here

          <style> We’re going to start communicating with you using CSS

          </style> Our CSS communication with you is over

     </head> Information about our webpage stops here

     <body> Content to display starts here, browser. Pay attention!
          
     </body> Please stop displaying our content

</html> Our HTML communication with you is over

Add the opening and closing style tags inside the <head>

Writing CSS

  • Everything you’ve created on your webpage so far can be individually styled!

  • To do this, we use CSS selectors. Each selector has within it, one or more properties and each property has a value that you can customize
body { 
     background-color : red; 
}
--------
selector { 
     property : value;
}

CSS Selectors

Refer to an element in your HTML 

  • CSS selectors use
    { to start making something look pretty and
    } to stop

  • Remember: within { } is our property and value. 
    To end a value, use ;


** Most code is written with American spelling for things like 'color '

HEX Codes

  • The word “red” will only ever display one shade of red for us. But there are so many other shades available on our screens!
  •  A hex code is a made up of 6 numbers or letters and is just another way of saying a specific color. 

Hex Codes

  • We use the # sign before our 6 digits to tell our browser we are referring to a hex code  

  • Example: the hex code #984E48 is another way of saying a specific shade of red

  • Try adding your using own hex code to background-color using
    http://www.colorpicker.com


Fonts

  • There are a number of font families that are considered "web safe.”
    A few of them are:
    Arial, Times New Roman, Georgia, Courier

  • Fonts can also have a specific font-size (in the example below, this number is in pixels!) and a specific color

 font-family: Helvetica ;
 font-size: 18px ;
 color: #FFFFFF;

What else can we style?

  • Okay, so we’ve styled the body. But what if we want all our paragraphs to be a different color than what the body is?
  • Recall the <p> </p> HTML tags we used earlier

  • We can use ' p ' as a CSS selector

Styling a paragraph

To change the font color of a paragraph, we use the following:

p {
   color : #FFFFFF;
}

Try adding your own color hex code, font-family and font-size

Now...back to our HTML

div

  • HTML has a neat little tag called the <div>

  • On it's own, this tag actually does nothing, its just a transparent box. But if we make the div unique, we can better organize and style our content

  • Adding an id attribute makes a <div> unique for styling

  • Adding a class attribute makes a <div> unique for styling

id

  • An id is an attribute that can only used once on a webpage with its specific name
  • For example, we can wrap all of our paragraphs, links and images inside a label called main content and then style it using CSS. 
  • If we then use the id as our selector in CSS, the style for it will only ever be seen once on our webpage

id

  • Find where you created your first HTML paragraph/link/image
     
  • Above that line of code, add the following: 
<div id = “ maincontent ” >  

  • Now, find where you created your last paragraph/image/link

  • Below that line of code, add the following: 
</div>

Styling an id

  • To style an id in CSS, we always put # before the name of the id

  • Add the following in between your two style tags :

#maincontent {
    background-color: #FFFFFF;
}


Bonus:

text-align: center;

border-top: 10px solid #000;

border-bottom: 10px solid #000;


class

  • A class is an attribute that can be used multiple times on a webpage with its specific name. 

  • For example, we have one paragraph and one image and want to wrap each one in it’s very own box - the catch? The boxes need to look exactly the same. Although these two boxes contain completely different content, we can use a class so that they have the same style

class

  • Find a paragraph/link/image that you want to place in it’s own box. Above that line of code, add the following: 
<div class=“box”  > 

  • Below that line of code, add the following:                                                  
</div>

  • Find a second paragraph/link/image that you want to place in it’s  own box. Above that line of code, add the following:  
    <div class=“box”  >
  • Below that line of code, add the following: </div>

Styling a class

  • To style a class in CSS, we always put  .  before the name of the class

  • Add the following in between your two style tags :

.box  {
    background-color:  #E9F7A0;
}


Bonus:

border-width: 2px;

border-style: solid;

border-color: #FF2D6A;

More CSS ideas

img {
    border-width: 2px;
    border-style: solid;
    border-color: #000000;
 }

a:link {
    text-decoration: none; }

#maincontent {
    padding: 20px;
}

Congratulations! 

  • You’ve made your first webpage! Be sure to click “Publish” in the top right and share the link with your friends and family!
  • If you would like to edit your published webpage, simply go to webmaker.org, sign in, and hover over your username in the top right 
  • Select “My Makes” from the drop down menu, hover over your project and select the pencil icon

  • Happy webmaking!

Brought to you by: 

Made with Slides.com