Presented by Malik Dixon / @mdixon2009
The ultimate goal of this class is to build and code your website from scratch.
A web browser is software that access and displays webpages, web applications, and files on the web.
Browser Examples: Google Chrome, Mozilla Firefox, Apple Safari, Internet Explorer, and Opera
A search engine is a web-based tool that enables users to locate information on the World Wide Web.
Search Engine Examples: Google, Yahoo, and Bing (MSN)
Google Chrome is the most widely used web brower.
Hypertext Markup Language (HTML) give content structure and meaning be defining that content as, for example, heading, paragraphs, or images.
All HTML document have a required stucture that includes the following declaration and elements
Informs the web browsers which version of HTML is used and is placed at the very beginning of the HTML document
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
http://www.w3.org/TR/html4/strict.dtd">
HTML 5
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="text/javascript" src="example1.js"></script>
<script src="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- content here -->
</body>
</html>
Each element can have HTML attributes specified. Element can also have content, including other elements and text
The html element represents the root of an HTML document. All other element must be the desendent of this elment
<html> </html>
Most elements has a beginning and an end tag
Elements in HTML have attributes; these are additional values that configure the element or adjust their behavior in various ways to meet the criteria the user want
The four core attributes that can be used on the majority of HTML element (although not all) are:
This could define a paragraph
Titled Heading Tag Example
For More Information: Mozilla Developer Network
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- content here -->
</body>
</html>
So what exactly are semantics? Semantics within HTML is the practice of giving content on the page meaning and structure by using the proper element. Semantic code describes the value of content on a page, regardless of the style or appearance of that content.
Block-level elements begin on a new line, stacking one on top of the other, and occupy any available width. Block-level elements may be nested inside one another and may wrap inline-level elements.
Inline-level elements do not begin on a new line. They fall into the normal flow of a document, lining up one after the other, and only maintain the width of their content
Both div's and span's, however, are extremely valuable when building a website in that they give us the ability to apply targeted styles to a contained set of content.
A div <div>is a block-level element that is commonly used to identify large groupings of content, and which helps to build a web page’s layout and design.
I may be found on...
Additionally, I have a profile on...
A span <span> on the other hand, is an inline-level element commonly used to identify smaller groupings of text within a block-level element.
Soon we'll be writing HTML with the ...
HTML and CSS give us the ability to leave comments within our code, and any content wrapped within a comment will not be displayed on the web page.
Comments help keep our files organized, allow us to set reminders, and provide a way for us to more effectively manage our code. Comments become especially useful when there are multiple people working on the same files.
Example
/* This is a CSS comment */
Headings are block-level elements, and they come in six different rankings, <h1> through <h6>.
Example
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Paragraphs are defined using the
block-level element. Paragraphs can appear one after the other, adding information to a page as desired.
Example
Steve Jobs was a co-founder and longtime CEO at Apple.
In his address Steve urged graduates to follow their dreams
The <strong> element is semantically used to give strong importance to text, and is thus the most popular option for bolding text.
The <b> element, on the other hand, semantically means to stylistically offset text, which isn’t always the best choice for text deserving prominent attention.
Caution: Falling rocks.
This recipe calls for bacon and baconnaise.
The header element like is sounds to identify the top of the page, article, section or other segment of a page. In general, the <header> element may include heading, intruducory text, and navigation.
<header>...</header>
It is easy to confuse the <header> element with the <head> element or the heading elements <h1> to <h6>. They all have different semantic meanings and should be used accounding to their meanings
The <header> element is a structual element that outlines the heading of a segment of a page. It falls within the <body> element.
The <head> element is not displayed on a page and is used to outline metadata, including the document title, and links to external files. It falls directly within the <html> element.
Heading elements, <h1> through <h6>, are used to designate multiple levels of text headings throughout a page.
The <nav> element identifies a section of major navigational links on a page. The <nav> element should be reserved for primary navigation sections only, such as global navigation, a table of contents, previous/next links, or other noteworthy groups of navigational links.
Most commonly, links included within the <nav> element will link to other pages within the same website or to parts of the same web page. Miscellaneous one-off links should not be wrapped within the <nav> element; they should use the anchor element,<a>, and the anchor element alone.
<header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
The <article> element is used to identify a section of independent, self-contained content that may be independently distributed or reused. We’ll often use the <article> element to mark up blog posts, newspaper articles, user-submitted content, and the like.
When deciding whether to use the <article> element, we must determine if the content within the element could be replicated elsewhere without any confusion. If the content within the <article> element were removed from the context of the page and placed, for example, within an email or printed work, that content should still make sense.
<section>
<article>
<h1>This is a Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</article>
</section>
The <section>element is used to identify a thematic grouping of content, which generally, but not always, includes a heading. The grouping of content within the <section>element may be generic in nature, but it’s useful to identify all of the content as related.
The <section> element is commonly used to break up and provide hierarchy to a page.
At times it becomes fairly difficult to decide which element—<article>, <section>, or <div>—is the best element for the job based on its semantic meaning. The trick here, as with every semantic decision, is to look at the content.
Both the <article> and <section> elements contribute to a document’s structure and help to outline a document. If the content is being grouped solely for styling purposes and doesn’t provide value to the outline of a document, use the <div>element.
The <footer> element identifies the closing or end of a page, article, section, or other segment of a page. Generally the <footer>element is found at the bottom of its parent. Content within the <footer>element should be relative information and should not diverge from the document or section it is included within.
<footer>....</footer>
Cascading Style Sheets (CSS) is a language designed for describing the appearance of documents written in a markup language such as HTML
It allows us to add layout and design to our pages, and it allows us to share those styles from element to element and page to page. Before we can unlock all of its features, though, there are a few aspects of the language we must fully understand.
Each browser come with is own default style sheet
Default css style sheet can be overwritten
Style sheet can be overwritten by the user
Inline
<body style="font: 12px sans-serif;">
Internal
body{
font: 12px sans-serif;
}
External
HTML
...
...
...
CSS
.hotdog p {
background: brown;
}
.hotdog p.mustard {
background: yellow;
}
Good markup is very important in using CSS