Remember, HTML is all about the meaning of your content Most HTML tags have built-in formatting that apply “meaning” to them and format their content.

Slides:



Advertisements
Similar presentations
Table, List, Blocks, Inline Style
Advertisements

CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
Part 2 Introduction to CSS. CSS Syntax – class selector 1 With the class selector you can define different styles for the same type of HTML element. You.
CSS CSS Precise Aesthetic Control. Cascading Style Sheets Though they can be put in HTML header, usually a separate page that the HTML links to Contains.
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
CSS. CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.
Cascading Style Sheets. Slide 2 Lecture Overview Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.
Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.
Introduction to Web Authoring Bill Hart-Davidson AIM: billhd30 Session 11
JMD2144 – Lesson 5 Web Design & New Media. ‘Div’ide and conquer One of the most versatile structure tags available is the.. tag Short for ision, it allows.
 Missing (or duplicate) semicolons can make the browser completely ignore the style rule.  You may add extra spaces between the properties/values to.
HTML & CSS A brief introduction. OUTLINE 1.What is HTML? 2.What is CSS? 3.How are they used together? 4.Troubleshooting/Common problems 5.More resources.
Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)
Headings, Paragraphs, Formatting, Links, Head, CSS, Images
Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.
18 People Surveyed HTML (HyperText Markup Language) HTML “tags” Describes structure Building blocks Headings, paragraphs, lists, links, images, quotes,
>> Introduction to HTML: Tags. Hyper - is the opposite of linear Text – words / sentences / paragraphs Mark-up – Marking the text Language – It is a language.
HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –
I NTRO TO CSS IAT100 Spring I NTRO TO CSS Covered in this lesson: Overview What is CSS? Why to use CSS? CSS for Skinning your Website Structure.
ECMM6018 Enterprise Networking For Electronic Commerce Tutorial 2 Cascading Style Sheets (CSS)
XHTML/CSS Week 3. This Week  Quiz to revise last week (XHTML and DW)  CSS - Part 2  Using HTML Tables.
CSS CSS is short for C ascading S tyle S heets. It is a new web page layout method that has been added to HTML to give web developers more control over.
Form Tag How to use Form Tag Something NEW ? PARAMETER Attribute NAME Specifies the name for a form To specify which form to submit with JavaScript, this.
WRT235: Writing in Electronic Environments Basic CSS.
Essentials of HTML Class 4 Instructor: Jeanne Hart
IS1825: Developing Multimedia Applications for Business Lecture 1: Introduction to CSS Rob Gleasure
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
Instructional Technology & Design Office or Beginning Web Design Presented by Laura Miller.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
Introduction to Web Authoring Ellen Cushman Class mtg. #14.
1 TECH1001 Lecture 6 Electronic Publishing and Production 1 More About Tables.
CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor
CIS234A Lecture 8 Instructor Greg D’Andrea. Review Text Table contains only text, evenly spaced on the Web page in rows and columns uses only standard.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.
Cascading Style Sheets
Lesson 15: Cascading Style Sheets. Objectives Identify ways to apply Web page formatting with Cascading Style Sheets (CSS1 and CSS2) using various methods.
DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.
Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Designing Web Pages The case for CSS. The Power of CSS css Zen Garden
External Style Sheets Exploring Computer Science – Lesson 3-6.
How to… Cascading Style Sheets. How to Insert a Style Sheet When a browser reads a style sheet, it will format the document according to it. There are.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: HTML Tables.
HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.
What is CSS? A set of style rules that tell the web browser how to present a web page or document. – In earlier versions of HTML, style characteristics,
1 Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
Cascading Style Sheets Using HTML. What are they? A set of style rules that tell the web browser how to present a web page or document. In earlier versions.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
Cascading Style Sheets Part 1 1 IT 130 – Internet and the Web.
HTML Extra Markup CS 1150 Spring 2017.
Organizing Content with Lists and Tables
>> Introduction to CSS
AN INTRODUCTORY LESSON TO MAKING A SIMPLE WEB PAGE By: RC Emily Solis
Introduction to web design discussing which languages is used for website designing
Introduction to Web Authoring
Lesson 5: HTML Tables.
Presentation transcript:

Remember, HTML is all about the meaning of your content Most HTML tags have built-in formatting that apply “meaning” to them and format their content in a specific way (p makes a paragraph, h1 makes a heading…) Span and Div, however just facilitate more precise grouping of elements for more intricate formatting.

They are completely dependent on the formatting that you associate with them through CSS. With this first introduction, I just want you to understand these two tags as additional ways to group elements in HTML so that you can stylize them all together with CSS.

The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML A div (division) element is a block-line, which is basically equivalent to having a line-break before and after it. It is used to group larger chunks of code together.

Div and especially span should not be used that often There is usually a cleaner and easier way to do whatever you’re trying to do with div and span

Meta tags are not visible on a web page Their purpose is to allow search engines to catalog information about the web page This facilitates better standing for a webpage in search engine results

Meta tags can be used as many times as you like The primary attributes associated with HTML5 meta tags are content, name and charset The values related to the name attribute can be “description” “author” or “keywords” The values related to the content attribute can be a few things, but “content-type” is best. Don’t worry about http-equiv, that is from HTML 4.01

This is pretty close to what you learned in the Beginner tutorial

You will notice though, that the tags have been replaced with tags

is a standard data cell is a header cell, which comes with header formatting

“colspan” and “rowspan” are also new additions to the tags

These attributes merge cells in rows and columns

is a specific kind of list, similar to what you’ve already seen in the beginner tutorial with or The list items in this definition list are labeled first with (rather than ) This means definition term, and you can have as many of these as you like The definition term is followed by which means definition means definition description. You can have a number of these following for multiple definitions

Styling changes the look of content. Styling can be inline, internal or external Inline - style is an attribute defining a value within a tag: Internal - style is hidden in the document head as a tag containing CSS selectors, properties and values: p {font-size:20px; color:green} External - is just like internal, but separated out into a linked CSS file. More on that next class.

Inline - style is an attribute defining a value within a tag Internal - style is hidden in the document head as a tag containing CSS selectors, properties and values.

Common styling includes: font-family (caps-sensitive), font-size, color, background- color, text-align, strong, em Inline styling syntax: Internal styling syntax: selector {property:value; another-property:value}