ITI 133 HTML5 Desktop and Mobile Level I

Slides:

Advertisements

Similar presentations

ITI 133: HTML5 Desktop and Mobile Level I

Advertisements

Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.

Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.

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

Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

>> Introduction to HTML: Tags. Hyper - is the opposite of linear Text – words / sentences / paragraphs Mark-up – Marking the text Language – It is a language.

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

>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.

© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.

UF and College of Medicine Web Pages. UF and Com Web Pages Makes heavy use of CSS Uses Server Side Includes Not the Dreamweaver kind of Templates.

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.

Session 1 Chapter 1 - Introduction to Web Development ITI 133: HTML5 Desktop and Mobile Level I

CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.

University of South Asia Course Name: Web Application Prepared By: Md Rezaul Huda Reza

Chapter 1 Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc.Slide 1.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.

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.

Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.

HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.

Source of website: “Text/css rel=“styles heet” This is an external style sheet link. This means that the.

INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.

Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”

HTML Basics Text, Images, Tables, Forms. HTML Structure HTML is comprised of “elements” and “tags” – Begins with and ends with Elements (tags) are nested.

Week 1: Introduction to HTML and Web Design

HTML Extra Markup CS 1150 Spring 2017.

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

HTML5 Level II Session V Chapter 8 - How to Use Responsive Web Design (RWD)

Front End Development workshop

© 2016, Mike Murach & Associates, Inc.

Dreamweaver – Project #1

Intro to Web Development Class A Review

ITI 163: Web, Mobile, and Social Media Design Introduction

HTML5 Level II Session II

Session I Chapter 10 - How to Work with Tables

ITI 133 HTML5 Desktop and Mobile Level I

HTML5 Level I Session III

HTML5 Level I Session I Chapter 19 - How to Deploy a Web Site on a Web Server

HTML5 Level I Session II Chapter 3 - How to Use HTML to Structure a Web Page

HTML5 Introduction Master a Skill / Learn for Life.

HTML5 Session III Chapter 5 - How to Use the CSS Box Model for Spacing, Borders, and Backgrounds Chapter 6 - How to use CSS for page.

HTML5 Level I Session III

HTML5 Level I Session III

Session I Chapter 18 - How to Design a Web Site

Chapter 11 - How to use jQuery plugins and jQuery UI Widgets

Session VI Chapter 8 - How to Use Responsive Web Design (RWD)

Chapter 8 - How to Use Responsive Web Design (RWD)

HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks

Some Stuff You Need to Know

Master a Skill / Learn for Life

HTML5 Introduction Master a Skill / Learn for Life.

ITI 239 HTML5 Desktop and Mobile Level I

HTML5 Level I CyberAdvantage

HTML5 Course Review Master a Skill / Learn for Life.

HTML5 Session II Chapter 2 - How to Code, Test and Validate a Web Page Chapter 3 - How to Use HTML to Structure a Web Page

Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.

HTML / CSS Mai Moustafa Senior Web Designer eSpace eSpace.

HTML 5 SEMANTIC ELEMENTS.

ITI 163: Web, Mobile, and Social Media Design Introduction

ITI 134: HTML5 Desktop and Mobile Level II

CS3220 Web and Internet Programming HTML and XML Basics

Master a Skill / Learn for Life

HTML5 Level II (CyberAdvantage)

HTML Level II (CyberAdvantage)

HTML5 Level I CyberAdvantage

Session IV Chapter 15 - How Work with Fonts and Printing

ITI 133: HTML5 Desktop and Mobile Level I

Course Review HTML5 Level I Course Review

© 2017, Mike Murach & Associates, Inc.

ITI 133: HTML5 Desktop and Mobile Level I

Presentation transcript:

ITI 133 HTML5 Desktop and Mobile Level I Session II Chapter 3 - How to Use HTML to Structure a Web Page www.profburnett.com

Class Outline Code the Head Section Code the Text Elements Structure the Content Code Links, List and Images Structure the Web Page Student Exercise 1 9/18/2018 Copyright © Carl M. Burnett

Code the Head Section Title Favicon Metadata – charset, name, content External CSS JavaScript Global 9/18/2018 Copyright © Carl M. Burnett

Code the Text Elements Heading and Paragraphs Special Blocks of Text h1, h2, h3, h4, h5, h6, p Special Blocks of Text pre, blockquote, address Inline Elements – page 91 Character Entities – page 93 9/18/2018 Copyright © Carl M. Burnett

Core HTML Attributes id – Unique identifier for element for CSS. class – class name for use by CSS. title – additional info for tooltip. lang – language of the content of the element. 9/18/2018 Copyright © Carl M. Burnett

Structure the Content HTML Block Elements HTML5 Semantic Elements <div> Element <span> Element HTML5 Semantic Elements Other HTML5 Elements 9/18/2018 Copyright © Carl M. Burnett

Code Links, List and Images Coding for: Links List Images 9/18/2018 Copyright © Carl M. Burnett

Structure the Web Page Page Layout HTML File 9/18/2018 Copyright © Carl M. Burnett

Student Exercise 1 Complete Exercise 3-1, page 120 using Dreamweaver. The Town_Hall directory listed in the book is now the root directory on your developmental site. The c3_content.txt file listed in the book for Exercise 3-1 is located in the txt folder on your developmental site. Upload your HTML home page file to the live site to preview. Students will preview in browser website files 9/18/2018 Copyright © Carl M. Burnett

Next: Chapter 4 – How to Use CSS to Format the Elements of a Web Page Class Review Code the Head Section Code the Text Elements Structure the Content Code Links, List and Images Structure the Web Page Student Exercise 1 Next: Chapter 4 – How to Use CSS to Format the Elements of a Web Page 9/18/2018 Copyright © Carl M. Burnett