Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.

Slides:



Advertisements
Similar presentations
Farhan Nisar University of Peshawar
Advertisements

Basic Principles for Web Design Source:
Table, List, Blocks, Inline Style
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
Introduction to HTML & CSS
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Cascading Style Sheets (CSS). Cascading Style Sheets With the explosive growth of the World Wide Web, designers and programmers quickly explored and reached.
Cascading Style Sheets
Cascading Style Sheets
/k/k 1212 Cascading Style Sheets Part one Marko Boon
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
HTML Tables, Lists, Blocks, Colors, Styles
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
Building a Website: Cascading Style Sheets (CSS) Fall 2013.
CSS(Cascading Style Sheets )
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
Cascading Style Sheets SP.772 May 6, CSS Useful for creating one unified look for an entire web site. Helps to seperate style from content. Can.
Lecture 5. CSS 2 What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles.
4.01 Cascading Style Sheets
CM143 Week 4 Introducing CSS. Cascading Style Sheets A definition for the style in which an element of the webpage will be displayed Border width, colour,
HTML BASIC
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –
CS105 Introduction to Computer Concepts HTML
HTML. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language.
HTML - Quiz #2 Attendance CODE:
Cascading style sheets (CSS)
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
ACM 511 HTML Week -1 ACM 511 Course Notes. Books ACM 511 Course Notes.
 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
1 HTML محمد احمدی نیا 2 Of 43 What is HTML?  HTML stands for Hyper Text Markup Language  HTML is not a programming language, it.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
CHAPTER 1 HTML & HTML5 I อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
Introduction to HTML. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is.
CSS Basic (cascading style sheets)
Introduction to CSS. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External.
CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.
HTML tags Some popular ones. Paragraph: separated by a single line of white space Line break NOTE: no end tag is used for this tag Headlines ( through.
Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.
Cascading Style Sheets Creating a Uniform Site. Style Sheets  Style sheets are used for conformity on a web page or web site.  Style sheets eliminate.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
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.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
1 HTML. 2 Full forms WWW – world Wide Web HTTP – Hyper Text Transfer Protocol HTML – Hyper Text Markup Language.
Chapter 1: Intro to HTML Section 1: HTML Structure Presentation Section 2: Layout of an HTML File Section 3: Working with Lists & Tables Section 4: HTML.
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.
CSS for Styling By Jinzhu Gao.
4.01 Cascading Style Sheets
Web Development & Design Foundations with HTML5 8th Edition
( Cascading style sheet )
Cascading Style Sheets
Cascading Style Sheet (CSS)
Web Development & Design Foundations with HTML5
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Table CSS Create a new CSS called tablestyle.CSS Green Background
Html.
4.01 Cascading Style Sheets
Web Programming and Design
Presentation transcript:

Learning HTML

HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class name for an element Id – specifies a unique id for an element Style – specifies inline style for an element This text is arial This text is black

Formatting and Borders This text is bold This text is strong This text is italicized This text is emphasized A commonly used and web acceptable CSS way to code the border is: style="border: 1px solid #000000" However, the shorthand style will cause problems with several popular clients. You can code the exact same border more reliably with the following syntax: style="border-style:solid; border-color:#000000; border-width:1px"

Getting Started… HTML stands for Hyper Text Markup Language HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and Start and end tags are also called opening tags and closing tags

Basic HTML Title Body copy – first paragraph Body copy – second paragraph

Basic Table This is a basic table Defines a table Groups the body content in a table Defines a table row Defines a table cell

Additional Basic Tables This is a table with two columns This is the second column This is a table with two rows This is the second row

Links and images Basic link: Link to google …looks like Link to google Basic image tags: Relative URL: Absolute URL: *we will always need absolute URL’s from clients This image has a specified width and height. When scrolled over, it will say “Google”.

Lists

HTML Colors HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign. This td has a black background # #FFFFFF #FF0000 #FFFF00

Use of DIV’s The div element is a block level element used for grouping HTML elements. Examples: Content Footer text would go here

HTML Styles There are three ways of inserting a style sheet: External style sheet (Ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file.) Internal style sheet (Can be used if one single document has a unique style.) Inline styles (Can be used if a unique style is to be applied to one single occurrence of an element.) *In an message it is common for information in the head tag of the code to be stripped out completely, so an embedded style sheet will not work. Due to the nature of , reference to an external style sheet absolutely will not work with most clients.

body {background-color:yellow;} p {color:blue;} Background color is yellow, font is blue. Pulling from styles above. Background color is yellow, font is blue. Styles are included right here. CSS Styling Inline Styling

Adjustments Avoid CSS Avoid DIV or SPAN tags Do not use Flash, JavaScript or forms Host all images - do not attach images Do not use background images Specify the width and height of all images Margins are ignored for images. Float style is ignored - use align="left" or align="right" instead