The Basics
Intro to Web Development
Lesson 1: Intro to HTML
# 1
Intro to HTML
| Resource | Link |
|---|---|
| Video Lessons | |
| Podcast Lessons | |
| Basics Homepage |
Table of Contents
First Steps with HTML
HTML Syntax
I had a piece of toast and a muffin.<p>I had a piece of toast and a muffin.</p><p>
</p>
Text
This text has no markup. Plain text in HTML file.
This text is wrapped with a paragraph tag
Opening Tag
Closing Tag
Create Your First HTML Element
add <p> tags to this piece of text
This is the challenge!
<p> sentence </p>
Click for a hint!
HTML Tags in Action
The Paragraph Tag
<p> Content </p>Heading Tags
<h1> Content </h1>Strong & Italic Tags
<strong> Content </strong> <i> Content </i>Line Break & Horizontal Tag
content<br/> content <hr/>HTML Tag Challenge!
On the next slide you will see a full page, empty code pen.
Your challenge is to recreate whats on this image.
Feel free to click "Hint" to see a live example.
Steps:
Create a heading tag
Create a smaller heading tag
Create a paragraph tag
Use the strong tag
Use the italic tag
Use the horizontal rule tag
Use the line break tag
Instructions:
Write your name
Your Job Title
What do you like to do on Sundays?
What do you like about coding?
Whats one hard thing about coding?
Tell me a joke!
Complete the Challenge!
Link Tags
A complete link tag looks like this
<a href="https://www.google.com/">This is a link to Google</a>The following is the link tag, at it's most basic.
<a></a> <a href="URL"> Content </a>HTML elements can have optional additions, called attributes. The link tag has a mandatory one called the href
<a href=""></a>The href is how the element knows where to send the user when the link is clicked
Most attributes are not mandatory, another good one for link tags is the target attribute
<a href="URL" target="_blank"></a>This value opens the link in a new tab "_blank"
Link Tag Challenge
<a href="URL" target="_blank"> Content </a>Link Tag Review
<a href="URL">Link Title</a>Attributes
Element End
Element Start
Full URL
What you see on site
<a href="URL" attribute-name="">...Attribute
Value
Link Attributes
<a href="URL" target="_blank">...</a>Element End
Attributes
Element Start
Value
Image Attributes
Element End
Attributes
Element Start
Value
<img src="URL" width="400px"/>Attributes
<p attribute="value" attribute2="value"> Content </p>Image Tags
<img src="https://bit.ly/2TdOyRs" width="200px" height="200px"/>List Tags
<ol>
<li>Jersey City</li>
<li>Hoboken</li>
<li>Newark</li>
</ol> <ul>
<li>Queens</li>
<li>Brooklyn</li>
<li>Manhattan</li>
</ul>
Review
HTML Tags Challenge
Advanced Challenge
Resources
Coding Edittor
Helpful Accounts
Browsers
Keep track of all usernames and passwords!
Do not use Internet Explorer!
Homework
Code Academy Course
Code Academy Course
Extras
Free Courses
Paid Courses
Treehouse
30 Day Free Trial - 30/a month
7 Day Free Trial - 25/a month
Treehouse Courses
LinkedIn Learning Courses
Contact Info
The next slide will be the last slide :)