dev-resources.site
for different kinds of informations.
Building the Foundations: A Beginner’s Guide to HTML
“The concepts covered in this article are based on the HTML basics course offered by Codecademy.”
I am restarting to practice html. Please keep watching me :)
And I hope my blog is helpful and cheerful to html beginners like me.
Content:
- HTML structure
- Headings
- Divs
- Attributes (using id = “”)
- Styling Text ('em' and 'strong' )
- Line Breaks ('br')
- Unordered Lists ('ul' and 'li' tag)
- Ordered Lists ('ol')
- Images (img src = “” /)
- Image Alts (img src=”” alt=”” /)
- Videos
What I learned:
- Don’t forget the “opening tag” and “closing tag”.
- 'h1' used for main headings and all other smaller headings are used for subheadings.
- 'p' is ‘paragraphs’ ; a block of plain text’
- 'span' is short pieces of text or other HTML.
- 'em' tag will render as italic.
- 'strong' tag will render as bold.
- 'br': line breaks
Code:
HTML structure code:
<body>
<h1>Hello World</h1>
<p>This paragraph is a child of the body </p>
<div>
<h1> Sibling to p, but also grandchild of body</h1>
<p>Sibling to h1, but also grandchild of body</p>
</div>
</body>
HTML Basic code:
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br/> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
<img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" alt="A Brown Bear"/>
<br><br>
<video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" width="320" height="240" controls>
Video not supported </video>
</div>
</body>
Result:
The Brown Bear
About Brown Bears
The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently Least Concern.
There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.
Species
- Arctos
- Collarus
- Horribilis
- Nelsoni (extinct)
Features
Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.
Habitat
Countries with Large Brown Bear Populations
- Russia
- United States
- Canada
Countries with Small Brown Bear Populations
Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.
Media
Guys, can you share what sources are helpful to beginners who wants to learn html and build portfolio?
If you guys know more basic knowledge or have some feedback, please let me know and share your ideas in the comment!! 😊
Featured ones: