Html Layout Explained
114 views
6 slides
Jun 26, 2020
Slide 1 of 6
1
2
3
4
5
6
About This Presentation
Let's walk through the structure of an HTML file and learn how to use it
Slide Content
HTML Layout
© 21 Lessons, 2019
© 21 Lessons, 2019
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/style.css">
<script src="/script.js" defer></script>
</head>
<body>
<h1>TODO LIST</h1>
<form class="input-form">
<input type="text" class="new-todo-item" />
<input type="submit" class="submit-form-button" value="Add" />
</form>
<h2>
My TODO's
</h2>
<ul class="todo-list">
</ul>
</body>
</html>
Let's Consider This HTML
Document
© 21 Lessons, 2019
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/style.css">
<script src="/script.js" defer></script>
</head>
<body>
<h1>TODO LIST</h1>
<form class="input-form">
<input type="text" class="new-todo-item" />
<input type="submit" class="submit-form-button" value="Add" />
</form>
<h2>
My TODO's
</h2>
<ul class="todo-list">
</ul>
</body>
</html>
Let's Consider This HTML
Document
© 21 Lessons, 2019
Structure
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Meta Information
Your Website Content
Goes Here
© 21 Lessons, 2019
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Meta Information
Your Website Content
Goes Here
© 21 Lessons, 2019
What Goes Into <head>?
The Website Title
CSS Includes
JavaScript Includes
<title>21 Lessons Blog</title>
<link rel="stylesheet" href="/
style.css">
<script src="/script.js"></
script>
© 21 Lessons, 2019
The Website Title
CSS Includes
JavaScript Includes
<title>21 Lessons Blog</title>
<link rel="stylesheet" href="/
style.css">
<script src="/script.js"></
script>
© 21 Lessons, 2019
What Goes Into <body>?
Your Website Content
- Headlines
- Images
- Paragraphs
- Lists
- ...
© 21 Lessons, 2019
Your Website Content
- Headlines
- Images
- Paragraphs
- Lists
- ...
© 21 Lessons, 2019
Did You Learn
Something New?
Save this Post
Share This Post
Like This Post
© 21 Lessons, 2019
Something New?
Save this Post
Share This Post
Like This Post
© 21 Lessons, 2019
Tags
Download
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 114
- Slides 6
- Age 1983 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
26 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
30 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
24 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
27 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
23 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
24 views