HTML / CSS – Basics Why the heck are we doing this?

Slides:

Advertisements

Similar presentations

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.

Advertisements

MA foundation Creating webpages using XHTML (part 1) Simon Mahony CCH

HTML Basics Customizing your site using the basics of HTML.

Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.

Introduction to HTML & CSS

Web Development & Design Foundations with XHTML

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

HTML: HyperText Markup Language Hello World Welcome to the world!

Chapter 2 HTML Basics Key Concepts

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.

Server Web Server Pages Client Browser  HTML can do everything  We will limit our use to defining the content units – NOT formatting  Why? ›

HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.

Introduction to HTML CPS470 Software Engineering Fall 1998.

Basic HTML UCR Webmasters Support Group Derk Adams.

Computer Science 103 Chapter 2 HyperText Markup Language (HTML)

Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Basics of HTML.

© 2012 Adobe Systems Incorporated. All Rights Reserved. LEARNING THE LANGUAGE OF THE WEB INTRODUCTION TO HTML AND CSS.

Creating a Simple Page: HTML Overview

Define html document byusing Example : Title of the document The content of the document......

_ HTML, XHTML & CSS Sami Niemelä | Module 1: Introduction to digital media: Day 02.

HTML history, Tags, Element. HTML: HyperText Markup Language Hello World Welcome to the world!

Objectives: 1. Create a Skeleton HTML 2. View a Skeleton File Through a Server and Browser 3. Learn HTML Body Tags for the Display of Text and Graphics.

XHTML. Introduction to XHTML What Is XHTML? – XHTML stands for EXtensible HyperText Markup Language – XHTML is almost identical to HTML 4.01 – XHTML is.

Explorers Guild April 27, What is HTML? Hypertext Markup Language (HTML) is the basic building block of the World Wide Web page. HTML files are.

XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML.

HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.

INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,

XP 2 HTML Tutorial 1: Developing a Basic Web Page.

INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.

CA Professional Web Site Development Class 2: Anatomy of a Web Site and Web Page & Intro to HTML.

The Language of the Internet. HTML5 Hypertext Markup Language- Fifth iteration Used to create documents containing text, images, and hyperlinks Has Grammar.

CPSC 203 Introduction to Computers Lab 33 By Jie Gao.

Chapter 7 Web Design.. HTML  Hypertext Markup Language  Using HTML, text is formatted by wrapping it in a tag.  The tags provide instructions to the.

Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.

INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.

HTML – Organizing Page Content. HTML Images img tag Required attribute: src

1 Web Application Programming Presented by: Mehwish Shafiq.

HTML – Organizing Page Content. HTML Images img tag Required attribute: src

 Create a free account  Verify your address.

CS 111 – Oct. 4 Web design –HTML –Javascript Commitment: –This week, read sections 4.3 – 4.5.

HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.

Introduction to HTML Year 8. What is HTML O Hyper Text Mark-up Language O The language that all the elements of a web page are written in. O It describes.

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.

HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.

Web programming Part 1: HTML 由 NordriDesign 提供

HTML World Wide Web Consortium What does HTML stand for? – – –

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.

HTML tags and attributes By: Dennis Champagne. List of tags.

Basic HTML Programming Technology Education Ellsworth Community Middle School Communication Systems.

XP 2 HTML Tutorial 1: Developing a Basic Web Page.

XP 1 HTML Tutorial 1: Developing a Basic Web Page.

Basic Steps to create a Website using HTML5. Hypertext Markup Language.

Introduction to Hypertext Markup Language James H. Harrison, Jr., M.D., Ph.D. Center for Biomedical Informatics University of Pittsburgh Medical Center.

HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.

INT222 – Internet Fundamentals

HTML cancho. HTML HyperText Markup Language A set of HTML tags.

Group 9: Through examples, explain how to build a css navigation bar. Presented by: Daniel Ku, Matt Iannacci & Iphia Henry.

 Create a free account  Verify your address.

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.

Week-11 (Lecture-1) Introduction to HTML programming: A web based markup language for web. Ex.

Basic Web Design UVI CELL Dave Gilliss Dave Gilliss

Web Basics: HTML/CSS/JavaScript What are they?

HTML & teh internets.

HTML / CSS Mai Moustafa Senior Web Designer eSpace eSpace.

Computer communications

Presentation transcript:

HTML / CSS – Basics Why the heck are we doing this?

HTML HyperText Markup Language

CSS Cascading Style Sheets

Reasons to learn HTML and CSS HTMLCSS Content Presentation Structure Layout / Design I have some content, how do I structure it? I have the content and the structure, how do I make it look good? Appreciate the logic in this. Change the look of everything efficiently.

HTML Document – Basic Structure You always need this: Start of document Start of Head End of Head Start of Body End of Head End of document

HTML – Source and Surface Source code What the browser displays is actually:

Rules Always close tags. Always! No matter what. Some tags can not be nested in others. A nested tag must be closed before a parent tag is closed.

HTML – Basic tags a paragraph heading of the first order - more headings an unordered list an ordered list a list item the anchor tag an image object

HTML – Hierarchy

HTML – Hierarchy

HTML – Hierarchy

HTML – Basic attributes Some Text the hypertext reference, turning “Some Text” into a link an image object is not complete if the source is not given and an alternative text is missing

Absolute vs. Relative Links Some Text an absolute reference Some Text a relative reference

Relative links revisited Some Text file in the same directory Some Text file in a sub-directory called pages

Relative links revisited 2 Some Text file in the parent directory Some Text file in a sub-directory of the parent directory dw

HTML – Special tags a division special segments make it bold make it italics line break horizontal line a block of quote

Want more? cheat-sheets/html-cheat-sheet/

Want more? cheat-sheets/html-cheat-sheet/ For those of you not good at remembering stuff.

Want more? cheat-sheets/html-cheat-sheet/ For those of you who want to know all the details.

Want more? cheat-sheets/html-cheat-sheet/ For those of you who like to try out things.

Want more? cheat-sheets/html-cheat-sheet/