Presentation
Download
Report
Transcript Presentation
• Take
Web Design Presurvey
• http://go.ncsu.edu/stars_sparcs
• Username:
• For
example, Omar Estrella -> oestrella
• Password:
• Check
First initial, last name
Same as above
out http://tinkerbin.com/
Web Design
SPARCS 2012
What is a Webpage?
What makes up a webpage?
What is HTML?
• HyperText
•A
•A
Markup Language
computer language to make webpages
human readable language that tells a
web browser how a web page should look
HTML & Your Browser
HTML
CSS
Javascrip
t
HTML Tags
• Can
be many things like images, text
formatting, tables, lists, etc.
• Tags
take the form <tag>stuff inside</tag>
• The
first <tag> is the opening tag stating
the action you are performing. The second
</tag> ends the action.
• <b>Hello,
world!</b>
Nested Tags
• What
if you want to make text bold and
underlined?
• HTML
tags can be nested to “chain” actions
•
<tag><tag2>Hello, world!</tag2></tag>
•
<b><u>Hello, world!</u></b>
HTML Documents
• HTML
documents end in “.html”
• filename.html
opens the document
<head> contains information
not
displayed on the
web page
<title> is the title shown in the
browser bar
<body> the information that is
displayed
<html>
<html>
<head>
<title>My title</title>
</head>
<body>
</body>
</html>
Formatting Text
•
Code
Tags
What it does
b
<b>Bold</b>
Bold
i
<i>Italic</i>
Italic
u
<u>Underline</u>
Underline
You can use as many tags at once:
•
<b><i><u>Hello, world!</u></i></b>
•
Hello, world!
Formatting Text cont.
• Headings
•
<h1>Heading 1</h1>
•
<h2>Heading 2</h2>
•
...
• <h6>Heading 6</h6>
Other Text Tags
Tag
What it does
This tag gives you a line across the
<hr />
pages (hr stands for horizontal
reference)
This
tag
breaks
the
texts
and
starts
<br />
it again on the next line
This tag stands for paragraph. It is
<p>
the same as <br> except it also
skips a line.
Text Alignment
• You
•
can align text using the <p> tag
<p align=“right”>Text aligned to right</p>
• Can
be left, center, or right
Images
• Images
•
have their own tags
<img src=“URL of the image”>
• You
can manipulate the image like text
•
<img align=“right” src=“http://i.imgur.com/Q7KDJ.jpg”>
•
<img height=“#px” width=“#px” src=“pokemon.jpg”>
Making Hyperlinks
• To
link to other websites:
•
<a href=“http://google.com/”>Text</a>
•
<a href=“http://bing.com/”><img src=“url of image”></a>
Lists
• There
are two types of lists
• Ordered
lists
• Unordered
lists
Ordered Lists
• HTML
tag: <ol>
<b>My morning routine</b>
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Go to class</li>
</ol>
My morning
routine
1. Wake up
2. Eat
breakfast
3. Go to class
Unordered List
• HTML
tag: <ul>
<b>Cake ingredients</b>
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Cake mix</li>
<li>Butter</li>
</ul>
Cake
ingredients
Eggs
Milk
Flour
Butter
•
•
•
•
Tables
•
Used to display information in a tabular
manner
•
Consists of headers, rows, columns, and cells
•
May have borders, colors, and styles
•
Table Tags:
Tables Example
<table>
<tr>
<th>Sushi</th>
<th>Number of Votes</th>
</tr>
<tr>
<td>Spicy Tuna</td>
<td>10</td>
</tr>
<tr>
<td>Eel</td>
<td>13</td>
</tr>
</table>
Sushi
Number of
Votes
Spicy Tuna
14
Eel
10
CSS
• Cascading
Style-Sheet
• Define
how things are displayed through
properties
• You
can add CSS to any HTML tag
•
<tag style=“css goes here”></tag>
•
<body style=“background-image:url(image url); background-repeat: repeat-x;”>
CSS Example
<body style="background-image:url('http://www.eatsleepgeek.com/wp-content/uploads/2009/09/sonicclassic.jpg'); background-repeat: repeat-x">