Download presentation
Presentation is loading. Please wait.
1
HTML | CSS | jQUERY + D E S I G N W </> R K S H O P
BY CHRIS KEOWN (TA) + KRISTINE LE (IA) COGS 187A THURSDAY | O1.O9.14 ❯❯
2
PIECES OF THE PUZZLE HTML Add in CSS And finally jQuery
3
FILE STRUCTURE TO USE
4
HTML - BASIC PAGE STRUCTURE
<!DOCTYPE html> <html> <head> <title>My title</title> </head> <body> Main content goes here </body> </html> HTML is not case sensitive. Most tags come in pairs, an opening and closing tag, with the content in between them. Line breaks and indentation are not required, but they make the code much more readable!
5
BASIC HTML TAGS Paragraph <p>Paragraph Text</p>
Image – absolute path <img src=“ /> Image – relative path <img src=“img/UCSD_logo.png” /> Link Text <a href=“ Tritons!</a> Image link <a href=“ src=“ width=“200”></a>
6
BASIC HTML TAGS <!DOCTYPE html> <html> <head>
<title>My title</title> </head> <body> <p>Paragraph Text</p> <img src=“ /> <a href=“ Tritons!</a> <a href=“ src=“ width=“200” /></a> </body> </html>
7
MORE BASIC HTML TAGS Block elements take up the whole line, and inline elements do not. Read more: s.asp Line break <br /> Headings <h1>My biggest heading</h1> … <h6>My smallest heading</h6> Bold <strong>HELP!</strong> Italics <em>Italicize me</em> Don’t forget comments <!-- Please ignore this stuff. -->
8
LISTS <!-- unordered list --> <ul>
<li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <!-- ordered list --> <ol> </ol>
9
TABLES <table> <thead> <tr>
<th>Student ID</th> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <td>A12345</td> <td>Bob</td> <td>Jones</td> <td>A54213</td> <td>Brandy</td> <td>Smith</td> </tbody> </table>
10
FORMS <form action="next_page.php" method="get">
<label>First Name:</label> <input type="text" name="firstname" value="" /><br /> <label>Last Name:</label> <input type="text" name="lastname" value="" /><br /> <label>Gender:</label> <select name="gender"> <option value="young">10-20</option> <option value="middle">30-60</option> <option value="notsoyoung">60+</option> </select><br /> <input type="radio" name="gender" value="male" />Male<br /> <input type="radio" name="gender" value="female" />Female <br /> <input type=“reset” value=“Reset” /> <input type=“submit” value=“Submit” /> </form>
11
GIVE IT SOME STYLE Everything looks bland so far! How do we spice it up? Control the font size? Change the color of text and the background? Control the placement and alignment of content? Enter Cascading Style Sheets (CSS) and the style tag
12
INLINE CSS Two problems:
<p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>First paragraph</p> <p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>Second paragraph</p> <p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>Third paragraph</p> <p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>Fourth paragraph</p> <p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>Fifth paragraph</p> <p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>Sixth paragraph</p> <p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>Seventh paragraph</p> Two problems: We have to type the same text over and over and over—or copy and paste it many times. If we change the style, we have to change it in many places.
13
STYLE SHEETS HTML File main.css <!DOCTYPE html> .maintext {
<head> <title>My title</title> <link href="main.css" rel="stylesheet" type="text/css" /> </head> <body> <p class="maintext">First paragraph</p> <p class="maintext">Second paragraph</p> <p class="maintext">Third paragraph</p> <p class="maintext">Fourth paragraph</p> <p class="maintext">Fifth paragraph</p> <p class="maintext">Sixth paragraph</p> <p class="maintext">Seventh paragraph</p> </body> </html> .maintext { font-size: 20px; color: red; text-decoration: underline; font-weight: bold; }
14
CSS FORMAT file.css /* Comments */ selector { property: value; … }
15
COMMON CSS PROPERTIES selector { Set the font size: font-size
property: value; … } Set the font size: font-size Set the color: color Set the background color: background-color Set the text alignment: text-align Set the height or width: height, width Set the padding or margin: padding, margin Large list of CSS properties can be found here: d&utm_medium=twitter
16
CSS SELECTORS selector { property: value; … }
Set every paragraph to have font-size 12px: p { font-size: 12px; } Set every paragraph tag with class “maintext” to have font size of 12px: p.maintext { font-size: 12px; } Set anything with class “maintext” to have font size of 12px: .maintext { font-size: 12px; } Set every paragraph and link to have font-size of 12px: p, a { font-size: 12px; } General selector: set every font-size on the entire page to be 12px: * { font-size: 12px; }
17
CSS PSEUDO-CLASSES selector {
property: value; … } Psuedo-classes are use to add special effects to some selectors. Set all links to the color blue. Have links turn green if they have been visited: a:link { color: blue; } a:visited { color: green; } Have links turn red when the cursor rolls over them: a:hover { color: red; } They are several other pseudo-classes. Read more here:
18
CLASSES VERSUS IDS HTML File main.css <!DOCTYPE html>
<head> <link href="main.css" rel="stylesheet" type="text/css" /> <title>My title</title> </head> <body> <img id=“logo” src=“logo_url.gif” /> <p class="maintext">First paragraph</p> <p class="maintext">Second paragraph</p> <p class="maintext">Third paragraph</p> <p class="maintext">Fourth paragraph</p> <p class="maintext">Fifth paragraph</p> <p class="maintext">Sixth paragraph</p> <p class="maintext">Seventh paragraph</p> </body> </html> /* maintext is a CSS class. You can use it as many times as you like. */ .maintext { font-size: 20px; color: red; text-decoration: underline; font-weight: bold; } /* The hash tag (pound sign) means logo is an ID. You can only use it once in your entire HTML file. */ #logo { height: 100px; width: 200px; }
19
LAYOUT
20
COMMON LAYOUTS
21
BUILDING THE LAYOUT <div> tag defines a section, or division, of a webpage and is used to structure the layout of the page. 960 x 50 960 x 50 660 x ?? 660 x ?? 300 x ?? 960 x 50
22
CODE FOR PREVIOUS LAYOUT
HTML File main.css <!DOCTYPE html> <html> <head> <title>My Page</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <div id="container"> <div id="header">Header</div> <div id="navigation">Navigation</div> <div id="sidebar">Sidebar</div> <div id="maincontent"> <div id="article">Article</div> <div id="section">Section</div> </div> <div id="footer">Footer</div> </body> </html> #container { width: 960px; margin: 10px auto 10px; } #header { height: 50px; float: left; #navigation { #sidebar { width: 300px; #maincontent { width: 660px; #article { #section { #footer {
23
BOX MODEL Elements populate the page in what's known as the CSS box model. Each HTML element is like a tiny box or container that holds the pictures and text you specify. The margin is the space around the element. The border is the edge of the element. The padding is the spacing between the content and the border. The content is the actual "stuff" in the box.
24
CHROME DEVELOPER TOOLS
25
DEVELOPER TOOLS The primary purpose of Chrome Developer Tools is to help you troubleshoot your code! Why is this link not red like I told it to be? Why is div in the wrong place? Where did my margin go? Why is my page not centered? FireFox also has a set of developer tools. If you see a webpage you like and want to mimic it, developer tools are useful for inspecting and understanding the webpage code. Advice: If you have are an issue with your code, Google it. The answers are all there; you just have to find them.
26
THE EVOLVING WEB Code doesn’t necessarily render the same in different browsers. Cross-browser testing is becoming less of a nuisance but still important. Know your audience. What browsers are they using? HTML5 has better support for audio and video, moving away from Adobe’s Flash. They have also created new tags such as <header>, <nav>, <aside> and <footer> to make layout more central to HTML. Read more about HTML 5:
27
JQUERY jQuery allows us to manipulate HTML and CSS after the page has been loaded, more formally known as the DOM (Document Object Model). It makes the pages dynamic. We can open and close things, drag stuff around, animate, etc. Two major aspects: Writing our own code using the jQuery API: Plugins: use other people’s code: Code Academy has a good tutorial to learn more about jQuery.
28
SAMPLE JQUERY HTML File main.css <!DOCTYPE html> <html>
<head> <title>My Page</title> <link rel="stylesheet" type="text/css" href="main.css"> <script src=" <script> $(document).ready(function(){ $("a.open").click(function(){ // Change the div display // $('#section').show(); // Change the content $('#section').html("Now I say open."); }); $("a.close").click(function(){ // $('#section').hide(); $('#section').html("Now I say close."); </script> </head> <body> <div id="container"> <div id="header">Header</div> <div id="navigation">Navigation</div> <div id="sidebar">Sidebar</div> <div id="maincontent"> <div id="article"> <a class="open" href="javascript:void(0);">Open Section</a><br /> <a class="close" href="javascript:void(0);">Close Section</a> </div> <div id="section">Section</div> <div id="footer">Footer</div> </body> </html> #container { width: 960px; margin: 10px auto 10px; } #header { height: 50px; float: left; #navigation { #sidebar { width: 300px; #maincontent { width: 660px; #article { #section { #footer {
Similar presentations
