Writing HTML
Some content modified from a Girl Develop It slideshow.In this lecture:
- General knowledge
- Basic HTML Tags
- Basic Layout/Display Information
What is HTML?
Hyper Text Markup Language
Anatomy of a Website
- Content: Text, Media
- + HTML: Structure + Semantics
- + CSS: Presentation + Design
- + JS: Interactivity
- = Your Website
/* questions? */
Practice Writing <html>
(Navigate back to your index.html file.)
Write Some Block Elements
(with some attributes)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My DataStory</title>
</head>
<body>
<article id="datastory">
<section id="personal-digital">
</section>
<section id="social-digital">
</section>
</article>
<footer id="resources">
</footer>
</body>
</html>
Write Some More Block Elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My DataStory</title>
</head>
<body>
<article id="datastory">
<section id="personal-digital">
<h1>Personal Digital Data</h1>
<p>Here is a placeholder paragraph.</p>
</section>
<section id="social-digital">
<h1>Social Digital Data</h1>
<p>Here is a placeholder paragraph.</p>
</section>
</article>
<footer id="resources">
<ul>
<li>Resource 1</li>
<li>Resource 2</li>
</ul>
</footer>
</body>
</html>
Write Some Inline Elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My DataStory</title>
</head>
<body>
<article id="datastory">
<section id="personal-digital">
<h1>Personal Digital Data</h1>
<p>
Here is a placeholder paragraph, and I should <em>emphasize
something</em>.
</p>
</section>
<section id="social-digital">
<h1>Social Digital Data</h1>
<p>
Here is a placeholder paragraph.
</p>
</section>
</article>
<footer id="resources">
<ul>
<li>
<a href="http://www.resourceurl.info/useful-info.html" target="_blank">
Resource 1</a>
</li>
<li>Resource 2</li>
</ul>
</footer>
</body>
</html>
/* Recap with Your Browser's Inspect Element Tool */
Summary
- What is HTML?
- Basic Tags
- Basic Layout Behaviors