CSS Weebly! td{ padding:20px}

Size: px

Start display at page:

Download "CSS Weebly! td{ padding:20px}"

Julia McKenzie
6 years ago
Views:

CSS Weebly body{ background:black; margin-top:2%; margin-bottom:2%; margin-left:3%; margin-right:3%; border:1px solid grey; padding:10px; color:silver; line-height:150%; font-size:16px;

1 CSS Weebly body{ background:black; margin-top:2%; margin-bottom:2%; margin-left:3%; margin-right:3%; border:1px solid grey; padding:10px; color:silver; line-height:150%; font-size:16px; text-decoration:none; font-family:lucida Sans Unicode, Ariel; color:black; } td{ padding:20px} #heading{ position:relative; width:415px; font-size:24px; color:yellow; font-family:syncopate,georgia; text-align:center; border:7px solid green; border-radius:20px;} #locgirl{ position:absolute; left:4%; top:6%} #locform{ position:absolute; left:4%; top:25%} #locid{ position:absolute; left:89%; top:25%} #locclass{ position:absolute; left:54%; top:28%} #lochtml{ position:absolute; left:14%; top:6%} #loclink{ position:absolute; left:24%; top:6%} #loccamera{ position:absolute; left:34%; top:6%} #loccartoon{ position:absolute; left:44%; top:6%} #locframe{ position:absolute; left:54%; top:6%} #locformatting{ position:absolute; left:66%; top:6%} #loclist{ position:absolute; left:78%; top:6%} #loctable{ position:absolute; left:89%; top:6%} #locreference{ position:absolute; left:47%; top:88%;} #locsyntaxhtml{ position:absolute; left:14%; top:27%} #locsyntaxcss{ position:absolute; left:=66%; top:27%}

2 #clear{ opacity:0.4; filter:alpha(opacity=40); } #clear:hover{opacity:1.0} #clearred{ opacity:0.4; filter:alpha(opacity=20); color:#f09405; } #clearred:hover{ opacity:1.0; filter:alpha(opacity=100); color:#ff0000; } a{text-decoration:none;} a:link {color:#ff0000;} a:visited {color:#00ff00;} a:hover {color:#ff00ff;} a:active {color:blue;} #small{ width:100px; height:100px; } #big{width:200px; height:125px;} #large{width:450px;}.tooltip { font-family:lucida Sans Unicode, Ariel; text-decoration:none; }.tooltip span { display:none;}.tooltip:hover span { display:block; color:silver; position:absolute; z-index:50; width:450px; background-color:black; border-radius:20px; border:15px solid #2b37ba; padding:10px 10px 10px 10px; } Body Weebly

3 <DOCTYPE html> <html> <head> </head> <body class='wsite-theme-dark'> <div> < Html Head------> <a id="locgirl" href="#" title="html Head"> <image id="small" src="/files/theme/girl_head.png" alt="html Head"></image> <span height="500"> HTML Head <image src="/files/theme/head_codes.png"alt="html Head Codes" width="450"> </image> <image src="/files/theme/head Tags.png" alt="head Tags" width="450"> </image> < Html Basic-----> <a id="lochtml" href="#" title="basic Html"> <image id="small" src="/files/theme/html.png" alt="html Basic"></image> <span height="500" style="left:-125px;"> Basic HTML< >(note the [ ] is used in place of < >) Example: [font size = "18"] [p] paragraph [/p] [div] defines division or section of a page [/div] [span style="color:blue"] Put some text here [/span] [br/] or [br] line break [ul] unorder list - bullet list <br/> &nbsp&nbsp&nbsp[il] first item here [/il]

4 &nbsp&nbsp&nbsp[il] second item here [/il] <br/> [/ul]<br/> [ol] order list - number list (same format as unordered list [/o]<br/> [img src="/files/theme/ "] no closing tag<br/> [font color="red"] [/font]<br/> [a href=" "] the important link tag [/a]<br/> [hr] horizontal line [h1] heading (h2,h3, h4, h4, h5, h6) [/h1] [body background="bgimage.jpg" repeat-yes] [body bgcolor="green"] [b] bold text [/b] [i] italic text [/i] [u] underline text [/u] [sub] subscript [/sub] [sup] superscript [/sup] < Link Tag-----> <a id="loclink" href="#" title="link Tag"> <image id="small" src="/files/theme/link.png" alt="link Tag"></image> <span height="500" style="left:-250px;"> The Link Tag < > (note the [ ] is used in place of < >) [a target="_blank" href="url"] [img src="/files/theme/image File (.png.gif etc.." alt="put title of image here" width="110" height="90"] [/a] < Object Tag-----> <a id="loccamera" href="#">

5 <image id="small" src="/files/theme/movie_camera.png" alt="link Tag"></image> <span height="500" style="left:-375px;"> The Object Tag < > (note the [ ] is used in place of < >) <b style="color:orange; font-size:20px">the easiest method to embed video is YouTube embed url with iframe tag. [iframe width="560" height="315" src=" frameborder="0" allowfullscreen][/iframe]</b> [object width="350" height="400" data="movie File.swf" (.swf.mov etc..) ] [/object] Note: Movie file must be in the same folder as the html file for the code above. More Object Examples: <image id="large"src="/files/theme/quicktime wav audio.png" alt="quicktime Movie Codes"></image> <image id="large"src="/files/theme/quicktime mp4 movie.png" alt="quicktime Movie Codes"></image> <image id="large"src="/files/theme/flash swf movie.png" alt="quicktime Movie Codes"></image> <image id="large"src="/files/theme/window wmv movie.png" alt="quicktime Movie Codes"></image> < Image Tag-----> <a id="loccartoon" href="#" title="object(movie) Tag"> <image id="small" src="/files/theme/cartoon.png" alt="object Tag"></image> <span height="500" style="left:-500px;"> The Image Tag < > (note the [ ] is used in place of < >) [img border="0" src="/files/theme/url" width="100" height="100" align="middle"] OR [img border="0"

6 src="/files/theme/image Name.png" width="100" height="100" align="top"] <img src="/files/theme/image align.png" > < Frame Tag-----> <a id="locframe" href="#" title="iframe Tag"> <image id="small" src="/files/theme/frame.png" alt="frame Tag"></image> <span height="500" style="left:-625px;"> The iframe Tag < > (note the [ ] is used in place of < >) [iframe src="/files/theme/website url" width="400" height="400" frameborder="0" allowfullscreen scrolling="yes"] Note: Use iframe for embedding a websites. Scrolling can be "auto" or "no" < CSS Formatting-----> <a id="locformatting" href="#" title="css Formatting"> <image id="small" src="/files/theme/id_class_image.png" alt="css Formatting"></image> <span height="500" style="left:-750px;"> CSS Formatting note the [ ] is used in place of < >

7 <font color="orange"> Example for inline CSS: </font> [p style="color:blue"] Put some text here [/p] <font color="orange"> Example for interior CSS - code must be inside the head section: </font> [style] body[font-size:20px; color:green] [/style] <font color="orange"> Example fo exterior CSS - code must be in a separate css document and a link tag in the header to link to the external CSS sheet. : </font> body[font-size:20px; background-color:green;] p[font-size:10px; color:red;] <font color="orange"> More CSS Examples</font> background-color:#d0e4fe; background-image:url(/files/theme/paper.gif); background-repeat:no-repeat; (or repeat-y;) background:transparent; border:1px solid grey; margin:auto margin-top:5%; margin-bottom:5%; margin-right:25%; margin-left:25%; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px; text-indent:50px; color:blue; line-height:150%; padding:20px; 7px ; 20px ; 7px; (top,right,bottom,left) text-align:left; font-family:verdana, Arial, Helvetica, sans-serif; font-size:10px; text-decoration:blink; overflow:hidden; (visible, scroll, auto) opacity:0.4; Caution when using opacity display: block; (default display is inline) Centering Methods: <img src="/files/theme/css centering.png">

8 < The List Tag-----> <a id="loclist" href="#" title="list Tag"> <image id="small" src="/files/theme/list.jpg" alt="list Tag"></image> <span height="500" style="left:-895px;"> The List Tag < > (note the [ ] is used in place of < >) [ol] [li] Coffee[/li] [li] Tea [/li] [li] Coca Cola [/li] [/ol] Note: unordered list is [ul] Definition Tag [dl] [dt]coffee[/dt] [dd]- black hot drink[/dd] [dt]milk[/dt] [dd]- white cold drink[/dd] [/dl] < The Table Tag-----> <a id="loctable" href="#" title="table Tag"> <image id="small" src="/files/theme/table tag.png" alt="table Tag"></image> <span height="500" style="left:-1010px;"> The Table Tag < > (note the [ ] is used in place of < >)

9 [table border="1" cellpadding="0" cellspacing="0" width="300" height="70" align="center" colspan="3" bgcolor="#ddffdd" background="bgimage.jpg"] [tr] [th]header 1[th] [th>header 2[/th] [/tr] [tr] [td]row 1, cell 1[/td] [td]row 1, cell 2[/td] [/tr] [tr] [td]row 2, cell 1[/td] [td]row 2, cell 2[/td] [/tr] [/table] < ID & Class-----> <a id="locid" href="#" title="id and Class"> <image id="small" src="/files/theme/class_id.png" alt="css ID & Class"></image> <span height="500" style="left:-1010px;"> CSS ID Class <image src="/files/theme/id_class.png"alt="html Head Codes" width="450" height="400"> </image> < Html Form------> <a id="locform" href="#" title="forms"> <image id="small" src="/files/theme/form_cartoon.gif" alt="html Forms"></image> <span height="500">

10 HTML Forms <image src="/files/theme/form_code_example.png"alt="html Head Codes" width="450" height="400"> </ image> < Html Sytax <p> <a id="locsyntaxhtml" href="#" title="html Syntax"> <image id="big" src="/files/theme/html syntax.png" alt="html Forms"></image> css syntax <p> <a id="#locsyntaxcss" href="#" title="css Syntax"> <image id="big" src="/files/theme/css syntax.png" alt="css Forms"></image> --> < Shout box > <center> <p align="center" style="margin-top:175px;"> <table style= "border:1px solid #333333;"> <tr text-align="center"> <a target="_blank" href=" title="w3 School"> <image width="250" src="/files/theme/w3school_browsers.png" alt="html Head"></image> <br/><br/> <p style="color:gray"> Video: <br/> Beige Square: Head Image: <br/> Beach Image: <br/><br/><br/>

11 </tr> <tr> <a target="_blank"href=" Web Design Site <a target="_blank" href=" 1vIpYsbJlJczfodjBvyOBVsiVWdkVYG2HK8aFvyGka -4/edit"> References <a target="_blank"href=" Weebly <a target="_blank" href=" w3schools Try it yourself <a target="_blank" href=" 1BTYSwbIAitBjT6A7v2KyGEdxfwRbI9GUfmTQrghenZk/edit"> Assignments <a target="_blank" href=" 0ApndmqGSv8VIdE0zbjY1WDU0OFMtc0pXTjBtUlVCMVE#gid=0"> Coding Log Sheet <a target="_blank" href=" de0zbjy1wdu0ofmtc0pxtjbtulvcmve6mq#gid=0"> Submit Practices </tr> </table> </div> <div style='display:none'>{title}</div> <div style='display:none'>{menu}</div> <div style='display:none'>{content}</div> <div style='display:none'>{footer}</div> </body> </html>

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information