Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download HTML & CSS - Tentmaker Webdesign
Document related concepts
Transcript
Basic Principles for Web Design
Source: http://w3schools.com
What is HTML?
HTML is a language for describing web pages.
• HTML stands for Hyper Text Markup Language
• HTML is NOT a programming language, it is a markup language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
• HTML tags are keywords surrounded by angle brackets
like <html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is
the end tag
• Start and end tags are also called opening tags and
closing tags
HTML Documents = Web Pages
• HTML documents describe web pages
• HTML documents contain HTML tags and plain
text
• HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is
to read HTML documents and display them as web pages. The
browser does not display the HTML tags, but uses the tags to
interpret the content of the page
The content of a website is stored within HTML “tags” (or
“elements”).
HTML Example
<html>
<body>
<h1>This Is A Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Explanation:
•
•
•
•
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
HTML Headings & Paragraphs
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
There are 6 heading tags, where the <h1> tag is
usually considered the highest and <h6> the
lowest.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Large blocks of text in sentence for is form is
usually placed with in a paragraph tag: <p>
HTML Links & Images
<a href=“http://facebook.com”>Check out this link to Facebook!</a>
Links are created using the anchor tag: <a>
•
•
•
•
•
Notice anything different about this tag?
“href” is an attribute of the <a> tag that tells the browser where to navigate to.
The text that is displayed on the website is between the start and end tags (“Check
out this…”).
HTML attributes are followed by an equal (=) sign and contain data with quotes
(“____”).
Some attributes are optional, others are required.
<img src=“images/strongbad.jpg” alt=“This would have displayed an image” />
Pictures are displayed using the image tag: <img>
•
•
•
•
Where is the end tag?
What do you think the “src” attribute does?
What do you think the “alt” tag does?
It is also a good idea to include the “width” and “height” attributes for faster loading.
ex: <img src=“image/source.jpg” alt=“alternate text” width=“300” height=“450” />
• Width and Height are in pixels.
• Thus, this image will be displayed 300 pixels wide and 400 pixels tall
HTML Lists
<ul>
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Lists are created using the unordered, ordered,
and definition list tags: (<ul>, <ol>, and <dl>)
•
•
•
•
•
Which two types of lists are shown above?
What do you think an unordered list looks like?
What do you think an ordered list looks like?
What do they both have in common?
What do you think the <li> tag stands for
Other helpful tags
<div>
<br />
<hr />
<p>
<b>This is bold</b>
<i>This is italicized</i>
<em>This is emphasized</em>
</p>
</div>
Here are some other helpful HTML tags:
•
•
•
•
•
•
The <br /> tag, or “break” tag causes a line break (like hitting “enter” while you type).
The <hr /> tag, or “horizontal rule” tag creates a horizontal line that can serve as a
border between sectionsb
The <b> tag, or “boldface” tag formats the text between the start and end tag as
bold.
The <i> tag, or “italics” tag formats the text between the start and end tag as
italicized.
The <em> tag, or “emphasis” tag tears a hole in the space-time continuum, allowing
for time travel and warp speed
And one of the most important tags is the <div> tag, or “division” tag. The <div> tag
is used to group other elements (tags) together into one block of content.
What is CSS?
CSS defines how HTML tags should be display.
•
•
•
•
•
•
CSS stands for Cascading Style Sheet
Can be used to change font type, color, size, etc…
Can be used to add background colors or images to elements
Can be used to add borders around elements
Can be used to arrange the layout of the content
Is stored in a separate file that is accessed by the HTML file
CSS Example
p{
background-color: blue;
text-align: center;
font-size:20px;
font-family: “Times New Roman, Times, serif;
color:#fff;
}
Explanation:
• The “p” element is styled here according to the entries between the two
brackets “{…}”
• These properties “cascade” down to all <p> tags
• You can choose colors by typing out the name of the color (blue, black, red,
etc…) or by using a hexadecimal number value that represents the red,
green, and blue mix that creates the color that you want.
Hexadecimal number order:
0123456789ABCDEF
Colors are represented in a six-digit hex number:
RRGGBB (Red, Green, Blue)
For “web-safe” colors, shorten the number to three digits:
RGB
#99FF33 (or #9F3 for short)
99CCFF (or#99CCFF
9CF for short)
(or #9CF for short)
These values are always
preceded by a pound sign “#”
Where do you think
#00FF00 is on the map?
CSS with Fonts
h1{
font-weight: bold
font-size: 50px;
font-family: “Times New Roman”, Times, serif;
color:#009;
}
Syntax:
• What is in each line?
–
–
–
–
•
•
•
•
Each new line begins with the attribute that we want to define (i.e. font-size)
Next is a colon “:”
Then, the desired value for that attribute
Each line must end with a semi-colon “;”
Why are there three different types of fonts under “font-family”?
What does “color” modify? Why isn’t it called “font-color”?
What color is #009?
Do you see what is wrong with the code above?
CSS Font shortcut
h1{
font: bold 50px “Times New Roman”, Times, serif;
color:#009;
}
Shortcuts:
• All of the “font” attributes have been collapsed into one
declaration.
• Each attribute is separated from the others with a space.
• Since “color” is not technically a font property, it has to be
declared on its own line.
• Some other CSS properties allow for shortcuts as well.
CSS with Divs
div{
display: block;
width: 600px;
height: auto;
margin:0 auto 0 auto;
color:FFF;
}
Styling <div> groups:
• The “display” attribute tells the browser that we want the dive to be
treated like a block rather than a line.
• We can give our block fixed dimensions of height and width.
• Here, we have defined the width as 600 pixels and have allowed the
browser to set the height based on the amount of content within the
<div>
• Shortcut: The “margin” attribute is a shortcut form of “margin-top”,
“margin-right”, “margin-bottom”, “margin-left” in that order.
• What is wrong with the above code?
CSS with class
HTML Code:
<h1 class=“myCustomHeaderClass”>This heading will be bright yellow</h1>
<h1>This heading will be black</h1>
CSS Code:
h1{
color:#000;
}
h1.myCustomHeaderClass{
color:#FF0;
}
Styling with classes:
• In the HTML code we have created a heading (<h1>) with a class
attribute of “myCustomHeaderClass”, and another with no class
attribute
• The CSS entry for h1 will normally cause all h1 tags to be black.
• However, because we have created a CSS entry for
h1.myCustomHeaderClass, this h1 tag will be bright yello
Try It!
HTML
<!--DO NOT REMOVE!!!-->
<html>
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<!--DO NOT REMOVE!!!-->
<body>
<div>
<h1>Heading</h1>
<h2>fff</h2>
<p>paragraph</p>
<a href="http://www.facebook.com">Click Here</a>
</div>
</body>
</html>
Refresh
div{
display:block;
width:600px;
height:auto;
background-color:#000;
color:FF0;
margin:60px auto 0px auto;
padding:30px;
}
h1{
background-color:#049;
border:1px solid #990;
text-align:center;
}
p{
background-color:#000;
color:#fff;
}
CSS
For More Information:
http://w3schools.com is an excellent tool for
beginners. There you can quickly and easily
learn anything from HTML to Flash. Best of
all, IT’S FREE!
