Embed Size (px)
Citation preview
UCHSCS1HTMLo Displaying lines of text:
o Line Breaks
note:<br>isanemptytag,itneedsnoend
o Horizontal Rules (lines)
<!DOCTYPEhtml><html><body><p>Thisparagraphcontainsalotoflinesinthesourcecode,butthebrowserignoresit.</p><p>Thisparagraphcontainsalotofspacesinthesourcecode,butthebrowserignoresit.</p><p>Thenumberoflinesinaparagraphdependsonthesizeofthebrowserwindow.Ifyouresizethebrowserwindow,thenumberoflinesinthisparagraphwillchange.</p></body></html>
This paragraph contains a lot of lines in the source code, but the browser ignores it.
This paragraph contains a lot of spaces in the source code, but the browser ignores it.
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
<!DOCTYPEhtml><html><body><p>Thisis<br>aparagraph<br>withlinebreaks</p></body></html>
Thisisaparagraphwithlinebreaks
<!DOCTYPEhtml><html><body><h1>Thisisheading1</h1><p>Thisissometext.</p><hr><h2>Thisisheading2</h2><p>Thisissomeothertext.</p><hr><h2>Thisisheading2</h2><p>Thisissomeothertext.</p></body></html>
This is heading 1 This is some text.
This is heading 2
This is some other text.
This is heading 2
This is some other text.
UCHSCS1HTMLo In HTML, spaces and new lines are ignored:
o The <pre> tag preserves both spaces and line breaks
o Formatting Text
This text is bold
This text is italic
This is subscript and superscript
<!DOCTYPEhtml><html><body><p>InHTML,spacesandnewlinesareignored:</p><p>MyBonnieliesovertheocean.MyBonnieliesoverthesea.MyBonnieliesovertheocean.Oh,bringbackmyBonnietome.</p></body></html>
MyBonnieliesovertheocean.MyBonnieliesoverthesea.MyBonnieliesovertheocean.Oh,bringbackmyBonnietome.
<!DOCTYPEhtml><html><body><pre>MyBonnieliesovertheocean.MyBonnieliesoverthesea.MyBonnieliesovertheocean.Oh,bringbackmyBonnietome.</pre></body></html>
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
<!DOCTYPEhtml><html><body><p>Thistextisnormal.</p><p><b>Thistextisbold.</b></p></body></html>
This text is normal.
This text is bold.
<!DOCTYPEhtml><html><body><p>Thistextisnormal.</p><p><i>Thistextisitalic.</i></p></body></html>
This text is normal.
This text is italic.
<!DOCTYPEhtml><html><body><p>Thisis<sub>subscripted</sub>text.</p></body></html>
Thisissubscriptedtext.
<!DOCTYPEhtml><html><body><p>Thisis<sup>superscripted</sup>text.</p></body></html>
Thisissuperscriptedtext.
UCHSCS1HTML
32 space
! 33 exclamation mark
" 34 quotation mark
# 35 number sign
$ 36 dollar sign
% 37 percent sign
& 38 ampersand
' 39 apostrophe
( 40 left parenthesis
) 41 right parenthesis
* 42 asterisk
+ 43 plus sign
, 44 comma
- 45 hyphen
. 46 period
/ 47 slash
o Special Characters: Use &# before the number
<!DOCTYPEhtml><html>
<body>
<h1>Hellooutthere!</h1>
<p>HowtoUseSpecialCharacters</p>
<h2>Nowlet'sFigurethisout...</h2>
<p>Diditwork?</p>
</body>
</html>
Hello out there! How to Use Special Characters
Now let's Figure this out... Did it work?
: 58 colon
; 59 semicolon
< 60 less-than
= 61 equals-to
> 62 greater-than
? 63 question mark
@ 64 at sign
UCHSCS1HTMLLookatthiswebpageforcolornames:http://htmlcolorcodes.com/color-names
o Colors
<!DOCTYPEhtml><html><style>div{height:50px;width:100%;}</style><body><h1>Colorscanbesetusingcolornames</h1><h1style="color:red">Heading</h1><h1style="color:orange">Heading</h1><h1style="color:yellow">Heading</h1><h1style="color:cyan">Heading</h1><h1style="color:blue">Heading</h1></body></html>
Colors can be set using color names
Heading
Heading Heading
Heading
Heading
<!DOCTYPEhtml><html><body><p>Thisissometext.</p><divstyle="color:PINK;background-color:RED"><h3>Thisisaheadinginadivelement</h3><p>Thisissometextinadivelement.</p></div><p>Thisissometext.</p></body></html>
This is some text.
This is a heading in a div element
This is some text in a div element.
This is some text.
o Div (areas)
<!DOCTYPEhtml><html><bodystyle="background-color:powderblue;"><h1>Thisisaheading</h1><p>Thisisaparagraph.</p></body></html>
o Page Background color
This is a heading This is a paragraph.
<!DOCTYPEhtml><html><body><h2>HTML<mark>Marked</mark>Formatting</h2></body></html>
o Highlighting
HTML Marked Formatting
UCHSCS1HTML
<!DOCTYPEhtml><html><body><h1style="font-family:verdana;">Thisisaheading</h1><pstyle="font-family:courier;">Thisisaparagraph.</p><pstyle="font-family:times;">Thisisaparagraph.</p><pstyle="font-family:tahoma;">Thisisaparagraph.</p></body></html>
This is a heading This is a paragraph.
This is a paragraph.
This is a paragraph.
o Fonts
<!DOCTYPEhtml><html><body><h1style="font-size:300%;">Thisisaheading</h1><h1style="font-size:200%;">Thisisanotherheading</h1><pstyle="font-size:160%;">Thisisaparagraph.</p></body></html>
This is a heading This is another heading This is a paragraph.
o Fonts Size
<!DOCTYPEhtml><html><body><h1style="text-align:center;">CenteredHeading</h1><pstyle="text-align:right;">RightJustifiedparagraph.</p><pstyle="text-align:left;">LeftJustifiedparagraph.</p></body></html>
Centered Heading Right Justified paragraph.
Left Justified paragraph.
oText Alignment
This is a heading This is a paragraph. Thisisaparagraph.
UCHSCS1HTML
<!DOCTYPEhtml><html><body><p><ahref="http://uchsmdavis7.weebly.com">VisitmyWeeblyAccount</a></p></body></html>
VisitmyWeeblyAccount
o Links
o Link Target Attributes
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
• _blank - Opens the linked document in a new window or tab
• _self - Opens the linked document in the same window/tab as it was clicked (this is default)
• _parent - Opens the linked document in the parent frame
• _top - Opens the linked document in the full body of the window
• framename - Opens the linked document in a named frame
<!DOCTYPEhtml><html><body><ahref="http://uchsmdavis7.weebly.com"target="_blank">VisitourHTMLtutorial!</a><p>Ifyousetthetargetattributeto"_blank",thelinkwillopeninanewbrowserwindowortab.</p></body></html>
VisitMyWebsite!
If you set the target attribute to "_blank", the link will open in a new browser window or tab.
UCHSCS1HTML
<!DOCTYPEhtml><html><body><p>Hereisanimageofourschool</p><imgsrc="http://uchsdavis.weebly.com/uploads/3/1/6/3/31636201/4123248.jpg?193"alt="UCHS"style="width:104px;height:142px;"></body></html>
o Adding Images
• Images have to be uploaded to the web and
kept in files.
• You have to “own” a place to store them.
• You can use your Weebly images.
• Run your website (not in edit mode), and
right-click on any image and select “copy
image address”.
• Use this address between the quotes in the
html image syntax.
• The alt attribute is necessary. It gives the
browser some text to display if your picture
won’t load or is taking a long time to load.
Here is an image of our school
<!DOCTYPEhtml><html><body><p>Youcanusegifsalso</p><imgsrc="https://media4.giphy.com/media/1GmAwqY2cPVWE/200.gif"alt="UCHS"style="width:104px;height:142px;"></body></html>
You can use gifs also
<!DOCTYPEhtml><html><body><p>Theimageisalink.Youcanclickonit.</p><ahref="http://uchsmdavis7.weebly.com"><imgsrc="http://uchsdavis.weebly.com/uploads/3/1/6/3/31636201/4123248.jpg?193"alt="HTMLtutorial"style="width:42px;height:42px;border:0;"></a><p>Add"border:0;"topreventIE9(andearlier)fromdisplayingaborderaroundtheimage.</p></body></html>
The image is a link. You can click on it.
Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.
UCHSCS1HTML
EXERCISES
Create an html or many html documents that use the specifications below:
o Add six headings to the document with the text "Hello". Start with the most important heading and end with the least important heading.
o Add a horizontal rule between a heading and a paragraph.
o Use <br> elements to separate the lines of a poem or song you know.
o Add a tooltip to a paragraph.
o Change the text color of a paragraph to "blue".
o Change the font of a paragraph to "courier".
o Center align a paragraph.
o Change the text size of a paragraph to 50px.
o Change the background color of a page below to yellow.
o Use <div> to Center align some content on a page.
o Highlight some text yellow.
o Add subscript or superscript formatting somewhere.
o Change the size of an image to 250 pixels wide and 400 pixels tall.
o Create a link to your weebly from text.
o Create a link to your weebly from an image.
o Use html code to try to display an image that doesn’t exist, but displays the alt text.
o Add a horizontal rule between a heading and a paragraph.
![Eruptive stars spectroscopy - astrosurf.com · N III 4636, [Ar III] 7135, [O II] 7320/7330. The [O I] lines at 6300, 6364A remain visible The [O I] lines at 6300, 6364A remain visible](https://img.pdfslide.us/doc/110x75/5e05b00e0b81a755e578e875/eruptive-stars-spectroscopy-n-iii-4636-ar-iii-7135-o-ii-73207330-the-o.jpg)
