HTML noteeesssssssssss
<body>
<p>Henlo</p>
</body>
elements-
starting point<body>
ending point</body>
also with <p>, </p>
hierarchy-
body (parent)
div
h1
p
div
body (all children elements)
H1 or (Headers)-------------
there are six heading elements
Smallest to highest:
1 <h1> (mainheadings)
2 <h2>
3 <h3>
4 <h4>
5 <h5>
6 <h6>
Divs-------------
the <div> element divids pages into SECTIONS
it is useful for grouping your elements and HTML
if you want to apply STYLES for elements inside, you can use <div>
it can contain any text, video, links, etc
Attributes
content added to the opening tag of an element
used for changing styles and providing info
made up of two parts:
1. name of the attribute
2. value of the attribute
attribute: id
helps identify content on our page
<div id="intro">
Displaying Text
if you want to display txt, you use either
-paragraph = a block of plain text
-span = short pieces of HTML
<span> </span>
span- use span element if you want to target
a piece that is in the same line
Styling Text
<em> emPHASIZES texts.(italic)
<strong> tag highlights important text (bold)
Line Breaks
line break element: <br>
- you can use it anywhere in the HTML code and a line break will be shown
(basically spaces)
Unordered Lists
make paragraphs into easy to read list
<ul> to create a list of items in no particular
order
items can be added by the <li> element
ex:
<ul>
<li>Word</li>
<ul>
Ordered List
<ol> each item in the list has a number
Images
all headings, paragraph, lists, and spans share
on thing in common; they are all texts
to add images you use <img>
note: it is a self-closing tag so to close it you only need to do type (/>)
<img> tag as attrivute src
src must be set to the images source or the location of the image.
the value of src must be the URL (uniform resource locator)
note: url is a web address or local address where a file is stored
EXAMPLE
<img src="https://content.codecademy.com/courses/web-101/web101-
image_brownbear.jpg"
/>
Image Alts
in order to make a website more inclusive, we need screen readers to easily read
image tags
alt attribute (alternative text) brings meaning to the images
note: should be a description of the image
example: <img src="Location" alt="Desc"/>
uses:
1. if an image fails to load, you can hover to see the description
2. visually impaired users can access a screen reading software
3. can improve the ranking of your site based of "SEO" (optimization)
Videos
HTML also supports displaying videos (needs a closing tag)
<video src="Location" width="" height="" controls>Video not supported</video>
width and height attributes used to set resolution. control attribute instructs to
basic video controls: play, pause, skip.
PREPARING FOR HTML
<!DOCTYPE html>
html attribute makes it so that browserd could interpret your text into html code
<html>
</html>
you've done two things which are
-make the web browser html and make
-the texts html
