Before Class Presentation Starts

View Github Repository Open presentation in a new window

mdixon47

See all presentation from mdixon47

Before Class Presentation Starts

0 0

html_css

HTML and CSS presentation

On Github mdixon47 / html_css

Before Class Presentation Starts

  • Create Google Account and Email
  • Create Github Account
  • Invite to the Google plus CE Web Development Page

Web Design and Development

Community Education

Presented by Malik Dixon / @mdixon2009

Who am I

The ultimate goal

The ultimate goal of this class is to build and code your website from scratch.

What will you be learning?

  • Hypertext Markup Language - HTML - (Structure)
  • Cascading Style Sheets - CSS - (Presentation)
  • JavaScript / Jquery - (Behavior)
  • Designing and Wireframing
  • Git - Github (Repository)

Tools of the Trade

  • Web Browser (Google Chrome)
  • Text Editor (Brackets)
  • CLI (Command Line interface) Optional
  • Git - Github Windows/Mac
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

What is a web browser

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

What is a search engine

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)

Lets Learn Google Chrome

Google Chrome is the most widely used web brower.

Developer vs. Designer What is the difference?

  • A Web developer builds the backbone of websites, typically from the ground up, and knows languages specific to the web. HTML, Javascript, JQuery and CSS are among the tools in their kit.
  • A Web designer is someone who designs Web pages. A Web designer is more focused on the look and feel of a website than how it works, and often uses WYSIWYG editors rather than diving into the HTML directly.
  • Can you be both?
  • YES

HTML - Hypertext Markup Language

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

  • Doctype
  • html
  • head
  • body

The document type or declaration

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>

HTML 5 Code Example

<!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>

HTML Elements

Each element can have HTML attributes specified. Element can also have content, including other elements and text

Root Element

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

HTML Attributes

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

Core attributes

The four core attributes that can be used on the majority of HTML element (although not all) are:

  • id
  • title
  • class
  • style
<p class="define">This could define a paragraph</p>
<h3 title="Hello HTML">Titled Heading Tag Example</h3>

For More Information: Mozilla Developer Network

Learning Brackets

Exercise 1

Creating the HTML file

Using Brackets Text Editor

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8" />
	<title>Document</title>
  </head>
  <body>
	   <!-- content here -->
  </body>
</html>

Learning Basic HTML Tags

  • Header tags H1 - H6
  • Paragraph tags
  • Anchor tags
  • Image tags
  • Division tags

What are HTML Semantics?

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 vs. Inline Elements

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.

Div's and Span's

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.

<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

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.

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the  ...</p>

Comments within HTML & CSS

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 HTML comment -->
/* This is a CSS comment */

Headings

Headings are block-level elements, and they come in six different rankings, <h1> through <h6>.

Example

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Paragraphs

Paragraphs are defined using the

block-level element. Paragraphs can appear one after the other, adding information to a page as desired.

Example

<p>Steve Jobs was a co-founder and longtime CEO at Apple.</p>

<p>In his address Steve urged graduates to follow their dreams</p>

Strong vs. Bold

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.

<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>

Building Stucture the HTML

Structure Elements

  • <header>
  • <nav>
  • <article>
  • <section>
  • <aside>
  • <footer>

Structure Elements

header

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>

Do not confuse elements

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.

Navigation

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.

Navigation Example

<header>
  <nav>
    <ul>
	 <li><a href="">Home</a></li>
	 <li><a href="">About</a></li>
	 <li><a href="">Contact</a></li>
   </ul>
 </nav>
</header>

Article

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.

Article Element Example

<section>
	<article>
	<h1>This is a Article</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</article>
</section>

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.

Deciding between article, section, or div elements

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.

Footer

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>

Let do some pratice

Cascading Style Sheets (Presentation)

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.

CSS Examples

Mosty Chocolates

Default Style Sheet

Each browser come with is own default style sheet

Default css style sheet can be overwritten

Style sheet can be overwritten by the user

CSS Syntax

  • Selector
  • declaration
  • property
  • value

Including Css in HTML

  • Inline
  • Internal
  • External

linking styles sheets

Inline

<body style="font: 12px sans-serif;">

Internal

<sytle type="text/css">
	body{
		font: 12px sans-serif;
	}
</sytle>

External

<link rel="stylesheet" href="css/main.css">

combining selectors

HTML

<div class="hotdog">
  <p>...</p>
  <p>...</p>
  <p class="mustard">...</p>
</div>

CSS

.hotdog p {
   background: brown;
}
.hotdog p.mustard {
   background: yellow;
}

Importance of good markup

Good markup is very important in using CSS

Lets do some work