Module 7 Flashcards
What are webpages written in
HTML
Stands for HyperText Markup Language
-webpages read and interpret HTML then display (render) the content based on the rules of HTML
Start and End tags
Where the tag starts and ends
end tags are the same but have / infront of the tag name
Unordered list (bullet list)
<ul>
<li>name</li>
</ul>
All the Parts of HTML stand for
HyperText
-these are links within a webpage
-hyper=greek word for beyond; idea is u click link and it takes u beyond the content
Markup
-ways that editors and publishers markup text
ex:
<strong>
<em></em></strong>
<ul>
Language
-it is the language that specifies how to add the markups and links
-ie the actual code
</ul>
How to add a link
<a>
called anchor tag</a>
<a> Wikipedia html </a>
the words Wikipedia Html will be the words that are linked (blue text that u click on to take u somewhere else)
WYSIWYG vs Text Editors
WYSIWYG: stands for What You Say Is What You Get
-type of editor/word processor
-ex: Microsoft word
-when you bold something, it is bold on screen, but you dont see the formatting or markup language used to do this
Plain Text Editor:
what we used, allows u to see the language and actually modify it
Tags
-angle brackets surrounding the name of the tag
-case-insensitive (doesnt matter if it is LIKE THIS or this)
-many appear as pairs
HTML Element:
anything that starts and ends with the tag, including the tag
ex: <em> add emphasis </em> this whole thing is called an <em> element</em>
-Paired tags can be nested
ie <em> this sentence is <strong> nested </strong> <em>
-BUT the ones inside must end before the prior one ends. Must close tag before u close old tag</em></em>
Not all tags are paired:
<hr></hr>
Attributes
Additional information to controll the behaviour of a tag, placed within the rag
<tagname>
ex: <a> </a>
</tagname>
How to start an html file
<!DOCTYPE>
<html>
<head>
<title> Hello </title>
</head>
<body>
Hi World!
</body>
</html>
Doctype:
Identifies/ communicates to the web browser what language is preceding, and what version (we dont indicate the version because that means it will be using the most current version, HTML5)
-not an html tag or element
<html>
this means html document is enclosed within tags
-specifies the language, if it is only one language then write lang="en"
has two core elements
a) <head>
-has additional info about the document, but doesnt contain the contect of doc
we only interesed in <title>, which gives us the title that is displayed in the title bar of browser
b)<body>
-contains the main content
</body></title></head></html>
Whitespace
-html ignores white space in doc so need to add specific tags in order to have space.
i.e no difference between a million spaces between no
-however, best to indent nested elements in order to make it easy to read the document
ways to make breaks
1) <p> </p>
groups texts into paragraphs so adds VERTICAL WHITE SPACE
2) <br></br>
-line break
-starts a new line in the middle of a paragraph (or within any element)
-better way to do this tho,
this is better for things like an address, not to align a paragraph
-should rarely use this
3)
-non-breaking space
-put it to have a big space between two words
-this is a character entity reference
-ensures no word wrapping will occur no matter how u resize this browser
Optional Closing Tags
html5 latest version started doing this
</p>
-bc cant have nested p and it is clear where it ends
</head>
bc head must be ended before body starts so wheneber body starts its like ok head is over
</body>
</html>
both are bc always at the end of doc so can be ommitted
</li>
(list item)
because it is immediately closed by the opening of the next list item <li> or by the end of the list </ul>
DO NOT OMIT </em> bc that doesnt make sense because it is not clear where this should end
Style
-Ways to change the apopearance or formatting of a webpage
-Gaudy 1990s: since people did not like howboring and unappealing webpages were, they tried adding things to make it better but they eneded up being so bad that none of this exists now
-our goal is to seperate content from style because the HTML was originally designed to avoid inclusion of style because we wanted to seperate it sicne STYLE DEPENDS ON WHERE CONTENT APPEARS
Section headers
-use <h1>, <h2> and <3>
h1: main heading
h2: sub-section
h3: sub-sub sectiion
DONT USE STRONG OR BOLD FOR THESE
<b> which is bold should rarely be used</b>
-DONT USE THEM WITHIN A PARAGRAPH TAG
should be like this
<h1> Main head</h1>
<p> subject </p>
Character Entity Refernce
-starts with & and ends with ;
how to display an ampersand, < and >
bc it is used for character entitiy references, u can only display it as such
&
for < and > since its used for tags, it can only be displayed as
< and >
