Design Css Jquery

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

PIECES OF THE PUZZLE
HTML Add in CSS
And finally jQuery

FILE STRUCTURE TO USE
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!
BASIC HTML TAGS
• Paragraph
<p>Paragraph Text</p>
• Image – absolute path

<img src=“http://upload.wikimedia.org/wikipedia/commons/f/f6/UCSD_logo.png” />
• Image – relative path

<img src=“img/UCSD_logo.png” />
• Link Text
<a href=“http://www.ucsdtritons.com”>Go Tritons!</a>
• Image link
<a href=“http://www.ucsdtritons.com”><img
src=“http://upload.wikimedia.org/wikipedia/commons/f/f6/UCSD_logo.png” width=“200”></a>
BASIC HTML TAGS
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<p>Paragraph Text</p>
<img src=“http://upload.wikimedia.org/wikipedia/commons/f/f6/UCSD_logo.png” />
<a href=“http://www.ucsdtritons.com”>Go Tritons!</a>
<a href=“http://www.ucsdtritons.com”><img
src=“http://upload.wikimedia.org/wikipedia/commons/f/f6/UCSD_logo.png” width=“200” /></a>
</body>
</html>
MORE BASIC HTML TAGS
• Block elements take up the whole line, and

inline elements do not.
Read more:
http://www.w3schools.com/html/html_block
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


LISTS


<ul>
<li>List item 1</li>
</ul>


<ol>
</ol>
TABLES
<table>
<thead>
<tr>
<th>Student ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>A12345</td>
<td>Bob</td>
<td>Jones</td>
<tr>
<tr>
<td>A54213</td>
<td>Brandy</td>
<td>Smith</td>
</tr>
</tbody>
</table>
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>
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

INLINE CSS
<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:
1. We have to type the same text over
and over and over—or copy and paste
it many times.
2. If we change the style, we have to
change it in many places.
STYLE SHEETS
HTML File main.css
<!DOCTYPE html> .maintext {
<html> font-size: 20px;
<head> color: red;
<title>My title</title> text-decoration: underline;
<link href="main.css" rel="stylesheet" type="text/css" font-weight: bold;
/> }
</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>
CSS FORMAT
file.css
/* Comments */
selector {
property: value;
property: value;
…
}
selector {
property: value;
property: value;
…
}
selector {
property: value;
property: value;
…
}
COMMON CSS PROPERTIES
selector { • Set the font size: font-size

property: value;
property: value; • 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:

http://www.w3schools.com/cssref/default.asp?utm_source=twitterfee
d&utm_medium=twitter
CSS SELECTORS
selector { • Set every paragraph to have font-size 12px:

property: value; p{
font-size: 12px;
property: value; }
…
} • 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;
}
CSS PSEUDO-CLASSES
selector { • Psuedo-classes are use to add special effects to some selectors.

property: value;
property: value;
• 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:

http://www.w3schools.com/css/css_pseudo_classes.asp
CLASSES VERSUS IDS
HTML File main.css
<!DOCTYPE html> /* maintext is a CSS class. You can use it
as many times as you like. */
<html>
.maintext {
<head>
font-size: 20px;
<link href="main.css" rel="stylesheet" type="text/css"
/> color: red;
<title>My title</title> text-decoration: underline;
</head> font-weight: bold;
<body> }
<img id=“logo” src=“logo_url.gif” />
<p class="maintext">First paragraph</p> /* The hash tag (pound sign) means logo is an ID.
<p class="maintext">Second paragraph</p> You can only use it once in your entire HTML file. */
<p class="maintext">Third paragraph</p> #logo {
<p class="maintext">Fourth paragraph</p> height: 100px;
<p class="maintext">Fifth paragraph</p> width: 200px;
}
<p class="maintext">Sixth paragraph</p>
<p class="maintext">Seventh paragraph</p>
</body>
</html>
LAYOUT
COMMON LAYOUTS
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
CODE FOR PREVIOUS LAYOUT
HTML File main.css
#container {
width: 960px;
<!DOCTYPE html> }
margin: 10px auto 10px;
<html>
#header {
height: 50px;
<head> width: 960px;
float: left;
<title>My Page</title> }
<link rel="stylesheet" type="text/css" #navigation {

height: 50px;
width: 960px;
href="main.css"> float: left;
}
</head>
#sidebar {
<body> width: 300px;
float: left;
}
<div id="container">
#maincontent {
<div id="header">Header</div> width: 660px;
float: left;
}
<div id="navigation">Navigation</div>
<div id="sidebar">Sidebar</div> #article {
width: 660px;
float: left;
<div id="maincontent"> }
<div id="article">Article</div> #section {

width: 660px;
float: left;
<div id="section">Section</div> }
</div> #footer {
height: 50px;
<div id="footer">Footer</div> width: 960px;
float: left;
}
</div>
</body>
</html>
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.

CHROME DEVELOPER TOOLS
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.
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:
http://www.w3schools.com/html/html5_new_elements.asp
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: http://api.jquery.com/
– Plugins: use other people’s code: http://plugins.jquery.com/
• Code Academy has a good tutorial to learn more about jQuery.
SAMPLE JQUERY
HTML File main.css
#container {
<!DOCTYPE html> width: 960px;
<html> margin: 10px auto 10px;
<head> }
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="main.css">
#header {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
height: 50px;
<script> width: 960px;
$(document).ready(function(){ float: left;
$("a.open").click(function(){ }
// Change the div display
// $('#section').show();
// Change the content #navigation {
$('#section').html("Now I say open."); height: 50px;
}); width: 960px;
$("a.close").click(function(){ float: left;
}
// Change the div display
// $('#section').hide();
// Change the content #sidebar {
$('#section').html("Now I say close."); width: 300px;
}); float: left;
}); }
</script>
</head>
<body> #maincontent {
<div id="container"> width: 660px;
<div id="header">Header</div> float: left;
}
<div id="navigation">Navigation</div>
<div id="sidebar">Sidebar</div>
<div id="maincontent"> #article {
<div id="article"> width: 660px;
<a class="open" href="javascript:void(0);">Open Section</a><br /> float: left;
<a class="close" href="javascript:void(0);">Close Section</a> }
</div>
<div id="section">Section</div>
</div> #section {
<div id="footer">Footer</div> width: 660px;
</div> float: left;
}
</body>
</html>
#footer {
height: 50px;
width: 960px;
float: left;
}

Design Css Jquery

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Design Css Jquery

Загружено:

Авторское право:

Доступные форматы

HTML | CSS | jQUERY + D E S I G N

CHRIS KEOWN (TA) + KRISTINE LE (IA)

COGS 187A❯❯ THURSDAY | O1.O9.14

And finally jQuery

• HTML is not case sensitive.

• Image – absolute path

• Image – relative path

• Block elements take up the whole line, and

• Don’t forget comments

• Enter Cascading Style Sheets (CSS) and the style tag

selector { • Set the font size: font-size

• 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:

selector { • Set every paragraph to have font-size 12px:

• Set anything with class “maintext” to have font size of 12px:

• Set every paragraph and link to have font-size of 12px:

• General selector: set every font-size on the entire page to be 12px:

selector { • Psuedo-classes are use to add special effects to some selectors.

• They are several other pseudo-classes. Read more here:

<div> tag defines a section, or division, of a webpage and is used to

<link rel="stylesheet" type="text/css" #navigation {

<div id="article">Article</div> #section {

• The margin is the space around the

• The border is the edge of the element.

• The padding is the spacing between the

• The content is the actual "stuff" in the box.

Вам также может понравиться