Matt Piccolella
The game is flawed.
How to Build a Website:
An Introduction to HTML and CSS
Presented by Matt Piccolella and ADI
When you go to a website, what happens?
HTML and CSS!
- Whenever you go to a website, your web browser loads HTML and CSS files
- These files help you create the things that you see on your screen!
So, what is HTML...?
- HTML stands for HyperText Markup Language
- It's a programming language that helps to define what appears where on the screen
- A series of "tags" which help to define different parts of a website
- Titles, Headers, and Paragraphs
- Images and Links
Let's Make our First Webpage
- Open Notepad++ and create a new file called "hello.html"
- Type the above code into the folder.
- Find the file that you created and double-click it
- Look at your newly created web page!
Parts of an HTML File
Every HTML file has two main parts:
- Head
- The title of the page
- Links to other files that we may need (images, etc.)
- Some information about the website
- Body
- Where everything else goes!
- Text, images, links - everything that you see on the page
We Love Tags!
- Everything that we add to a page consists of a TAG!
- Tags have openings and closings!
- <head>..........</head>
- Text
- <h1>...</h1> headers, large text!
- <p>...</p> paragraph!
- Links
- <a>...</a> link you to other websites or files
- Images
- <img> so you can add pictures to your website
Let's make a webpage!
- It's time to make your own webpage!
- Make a web page for your favorite celebrity (sports player, singer, or anyone else!)
- It should have:
- A title with their name
- A header that shows a welcome message!
- A couple pieces of information about them
- A picture of the person
- A link to a page about them
Other HTML Elements
- Lists! We can make ordered or unordered lists of anything we want!
- Emphasis! We can make our text bold, italics, or other text editing
Other HTML Elements
- Forms! (We'll work on these later)
- Tables! We can add all sorts of data to these
Let's Spice up our WebPages!
- Add some bold text to your page
- Add a list of some interesting facts about your celebrity
- Add a table of some of your celebrity's songs, teams, or movies (anything interesting about them!
- Anything you want! Add some personality to your page!
BUT NOW Let's MAKE IT PRETTY!!!
With CSS!!!
What is CSS?
- CSS stands for Cascading Style Sheets and it's the way that we make HTML look pretty
- We can apply different properties to different HTML tags to spice up our page
Let's Add our first CSS Rule
- We can add CSS to the head of our HTML file using the style tag!
- We have many different traits, like text color, that we can define
This element makes any "h1" tag that we have added blue.
The Result
What does a CSS Rule Look Like?
- A CSS rule has three different parts:
- selector - either an HTML tag or a class
- property - something like color, text-align, etc.
- value - defines the property, like 'red' or 'center'
Some Common CSS Properties
- background-color - background of an element's color
- border - we can add borders to an element!
- float - position either left or right
- font-family, font-size, font-weight - defining the font
- padding - how much space is around an element
- margin - similar to padding
Using CSS Classes
- We can create classes, which are groups of rules that we want to apply to certain elements
- These are prefixed by periods, and we can name them whatever we want!
In this we use "divs". They are basically sections of the page than can hold multiple elements.
Now Style your page!
- Change the colors of different pieces of text
- Center some text, send some text to the right, and send other text to the left
- Set the background of a section to your favorite color
- Do whatever you want! Make it look how you like!
- Have fun with it!
You ARe now Web Developers!
What's Next?
- Building a website - linking multiple web pages together!
- Bootstrap - beautiful CSS made easy
- JavaScript and Forms - making our web pages interactive
Thanks!
How to Build a Website
By Matt Piccolella
How to Build a Website
An Introduction to HTML and CSS
