Scribd
Upload
9 views

HTML Notes

ree

Uploaded by

chlo
Copyright
© Public Domain
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views

HTML Notes

ree

Uploaded by

chlo
Copyright
© Public Domain
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like