Lists Ordered Unordered. List Components  OR  Plus Star Wars Avatar Vacation.

Slides:



Advertisements
Similar presentations
Intro to HTML Basics HTML = Hypertext Mark-up Language HTML = Hypertext Mark-up Language HTML is a plain-text file that can be created using a text editor.
Advertisements

HTML Lesson 4 Hyper Text Markup Language. Assignment Part 3  Save your last html file as “FirstName3.htm”  Set the title as “FirstName LastName Third.
HTML Creating Web pages. HTML Hyper Text Markup Language Not programming, but a markup language using tags to format text in Web browsers.
Introduction to HTML Lists, Images, and Links. Before We Begin Save another file in Notepad Save another file in Notepad Open your HTML, then do File>Save.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Hypertext Markup Language (HTML) Created by Sarah Dooley & Amanda Foster Edited and presented by Caroline Hallam September 9, 2014.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.
HTML. We’ll learn … What HTML is What tags are What a basic web page looks like What 3 HTML tags are required What HTML comments look like How to title.
HTML Links and Anchors.
1 Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example 3.4 W3C HTML Validation Service 3.5 Headers 3.6 Linking 3.7 Images 3.8 Special Characters.
Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
HTML (HyperText Markup Language)
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
Amber Annett David Bell October 13 th, What will happen What is this business about personal web pages? Designated location of your own web page.
Enhancing Your Web Site. More Basic HTML Tags Today you will learn these tags: & add-on (alt, height, width & align) and “href” add-on Add a text link.
Informatics Computer School CS114 Web Publishing HTML Lesson 2.
 2002 Prentice Hall, Inc. All rights reserved.2 Chapter 2 — Introduction to HyperText Markup Language 4: Part I Outline 2.1Introduction 2.2Markup Languages.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Creating Web Pages with Links, Images, and Formatted Text
Lecture 2 Building Web Pages 1 Lecture 2  Building Web pages  Languages and programs  HTML - Hyper Text Markup Language  Netscape’s Composer  MicroSoft.
Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. **YOU SHOULD HAVE COMPLETED THE.
Unit 3 Day 6 FOCS – Web Design. Journal Unit #3 Entry #4 Write the source code that would make the following display on a rendered page: Shopping List.
Web Design (7) Images (1). Images and the Image Element Images can be placed in the flow of text..jpg,.png and.gif image files work in web pages The img.
HTML: Hyptertext Markup Language Doman’s Sections.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
Images Worksheet. Web template Download the template folder Unzip and save in your documents Rename the folder to “images work” without quotes.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
Configuring Shortcuts C: Drive D: Drive F:Drive Z: Drive.
This shows CIS17 and the first day introduction..
REEM ALMOTIRI Information Technology Department Majmaah University.
Session: 4. © Aptech Ltd. 2Creating Hyperlinks and Anchors / Session 4  Describe hyperlinks  Explain absolute and relative paths  Explain how to hyperlink.
HTML rev 01/09/2016 Hyper Text Markup Language. HTML -history  Hypertext Markup Language is the main language for creating web pages . It was first.
`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.
Click on CIS120/17 to go to website for course. The week of will tell you what is planned for the week and what has been assigned.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
Project 02 Creating and Editing a Web Page Concept Map of Unit Creating and Editing a Web Page Key Learning Understand the elements to create a web page.
Web Page Design XHTML Lesson 4. Adding Structure 4 A div tag –Used to divide up a web page and to add structural meaning to the page. –Will not change.
Introduction to HTML Hypertext Mark-up Language. HTML HTML = Hypertext Mark-up Language Is just plain simple text marked up by “tags” You can create a.
ENHANCE YOUR WEBSITE. HOW TO INSERT COLOR??? USE THE TAG: GO TO PICK COLOR WANT BY POINTING: THEN USE THE HEX NUMBER.
Revised June 2008 Online PD Basic HTML1 Let’s Try It!  Open Notepad oStart > All Programs > Accessories > Notepad oDon’t get WordPad by mistake – won’t.
HTML Help book. HTML HTML is the programming language used to make web pages for the Internet. HTML stands for Hyper Text Markup Language. HTML is made.
Computer Basics Introduction CIS 109 Columbia College.
Objectives At the end of this session students will: Define the following terms in two sentences or less Website Web page Browser Html URL Hyperlink Explain.
Online PD Basic HTML The Magic Of Web Pages
HTML Basics.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
LAB Work 01 MBA 61062: E-Commerce
Images in HTML PowerPoint How images are used in HTML
Uppingham Community College
Hosted by Coach Slanina
AN INTRODUCTORY LESSON TO MAKING A SIMPLE WEB PAGE By: RC Emily Solis
HTML Lesson 3.
A guide to HTML.
HTML.
Shortcuts C: Drive D: Drive F:Drive Z: Drive
Creating Tables in a Web Site
Intro to Web Development Links
HTML Links.
Introduction to HTML.
Using FrontPage Express
HTML.
Images in HTML PowerPoint How images are used in HTML
Presentation transcript:

lists Ordered Unordered

List Components  OR  Plus Star Wars Avatar Vacation

Practice (10 points)  Create a Web page that renders a Web page that:  Implements the movie list  Has a head and title  Title says “Your Name”  Add a caption above the list “My Favorite Movies”, make the caption be a  Saved as MovieList.htm  Figure out how to print the actual.htm page (source) (hint…Notepad can print)  Hand in resulting actual output and the source (htm) to GA. You can staple the htm and output together

Practice:Output  Should look like this:

Links -anchors  Components  Anchor (“a”)  Where to send user  What to click on to trigger the new location  eg Send user to Duquesne site when click the word Duquesne: ”Duquesne

Links (anchors) Hypertext References: links, and anchors Anchor ( ) element, has an href attribute (aka property)

More links

link-example JMA260 Index.htm html Simple3.htm We want a link from index.htm to simple3.htm

Start/save new page named index.htm My simple site  Save in JMA260 folder (root)on F: (as index.htm )  Copy to Z: JMA260 (root) folder  Test by typing in the long URL (the  Test by clicking on your name in the class schedule page

Null links  Look like links  Don’t do anything  Use # as the href value  My Work

Example-using and  Download Cozmo (a zip file ) (right-click, Save target as ) from the web site and save in html/images on F:  unzip it into html/Images on your USB device. Be sure you put it into images.  What’s a zip file

Image size and img element  right-click on cozmo.jpg and note the height and width . If we don’t specify the size within the img element, the browser has to figure out the size…slows download.

 Start a new Notepad session  Save as ListsAndAanchors.htm inside jma260/HTML on your USB device  Copy and paste this code:

Cat page Some 260 Stuff Here is a picture of a cat Links to cool stuff: Pittsburgh Weather Google Search

result Why the space between lines?

end Start digital portfolio Uses links, null, lists, anchors Open html-2-1