HTML Lesson 4.

Slides:

Advertisements

Similar presentations

Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple.

Advertisements

Build Your Own Webpage Code Academy.

Web Page Development Identify elements of a Web Page Start Notepad

HTML Lesson 1 TBE 540 Farah Fisher. Prerequisites Before beginning this lesson, the student must be able to… Access web pages and navigate the web Access.

Basic HTML All About Me - Your Name Information for display.

HTML, Formatting Text and Images Lesson 2.

HTML Basics An Introduction to HTML. What is HTML? Stands for “Hyper Text Markup Language” Composed of “tags” which are surrounded by sideways triangles.

Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.

HTML Graphics 5 Adding HyperText Links to a Web Page.

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.

Today’s Topic Language of web page - HTML (Hypertext Markup Language)

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.

Pre-Coding Web Design – Sec 3-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.

.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.

1 Essential HTML coding By Fadi Safieddine (Week 2)

Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.

HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.

Web Programming Basics of HTML. HTML stands for Hyper Text Mark-up Language A mark-up language is different than those that you have learned before in.

HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.

HTML INTRODUCTION. What is HTML?  HTML stands for Hypertext Markup Language  Developed in 1990  Hidden code that helps us communicate with others on.

All you ever needed to know…and more!. H.T.M.L. HyperText Mark-up Language Web’s programming language All web browsers Set of instructions Written with.

Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.

Last week you should have had something that looked like this.

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.

Basic HTML Hyper text markup Language. Lesson Overview  In this lesson, you will learn to:  Write HTML code using a text editor application such as.

Special Links Web Design – Section 3-7 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.

 HTML is hypertext markup language. It is a way for people to display their information with more complex pictures and text displays. Before HTML, messages.

HTML Lesson 3 Hyper Text Markup Language. Assignment Part 2  Set the file name as “FirstName2.htm”  Set the title as “FirstName LastName First Web Site”

Tables Web Authoring. This kind of a table THISIs aTABLE THISIs aTABLE THISIs aTABLE THISIs aTABLE.

HTML Lesson 2. Review Questions  What are HTML tags used for?  What do HTML tags look like?  What are the 3 required HTML tags?  In what section of.

Web Site Design & Management Class One Agenda Attendance Questionnaire Introductions Class Policies About the class Code your first page FTP Assignments.

M Dixon 1 Tech HTML. M Dixon 2 Admin Attendance Register: –log in to your profile.

Mark Dixon Page 1 Soft – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile.

Mark Dixon Page 1 Tech – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile.

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 Basic. What is HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it.

A New Page to Add-On Your Multimedia Page. Creating a New Page Open up a new Windows Notepad Click File > Save As > My Computer > “your flash drive” Name.

Tuesday, March 10 th Warm Up: What are Meta tags? Why do we use them and where do they go? Today: REVIEW some key/sticky concepts in Web Design.

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.

Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.

Links Building a Website Lesson 5. Links There are various ways to use links on a website: Link to other sites Link to other pages on the same site .

This shows CIS17 and the first day introduction..

IN THIS LESSON, WE WILL BECOME FAMILIAR WITH HTML AND BEGIN CREATING A WEB PAGE IN YOUR COMPUTER HTML – the foundation.

HTML Lesson 2. Internal Hyperlinks  Internal Hyperlink is a link that links to another page within a website.  Make another page using notepad++: page2.html.

Behind every site is a mix of special languages that your web browser understands The main way of describing any website is HTML HTML stands for Hyper.

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.

IN THIS LESSON, WE WILL BECOME FAMILIAR WITH HTML AND BEGIN CREATING A WEB PAGE IN YOUR COMPUTER HTML – the foundation.

Introduction to HTML Dave Edsall IAGenWeb County Coordinator’s Conference June 30, 2007.

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.

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

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

Introduction to HTML:.

Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines

Active Server Pages Computer Science 40S.

Pre-Coding Web Design – Sec 3-1

Writing html for websites and blogs

HTML Robert McIntosh

Web Page Design Mr. Wilson

HTML Structure.

Class Rules: Areas of Study Mrs. Nita Wimberly Grading Scale You will

One Set of Styles Connected to As Many Pages as You Want!!!

Hyper text markup Language

Presentation transcript:

HTML Lesson 4

Pictures in a sub folder Sometimes it easier to put all your pictures in a subfolder (folder inside your project folder) YOUR PROJECT 4 FOLDER pictures folder Project 4.hml Picture 1 Picture 2 Picture 3

Pictures in a sub folder In the <img> tag, you need to tell the browser where to find the picture (starting from where to web page is) <img src=“PictureFolderName/YourPicture.jpg” /> Example: <img src=“pictures/me.jpg” />

LINKS TO DIFFERENT SECTIONS ON A PAGE Use this so the user doesn’t have to scroll down on the page to see different sections About Me Sports Hobbies Hello, I’m a student at Tualatin HS. I’m 15 and am taking Algebra, freshman English, earth science, and social studies. I love running. I’ve been on a track team since grade school. I run 5 miles a day and plan on running the Shamrock in a couple of weeks. My dream is to run in the Boston Marathon. I like to read and listen to music in my spare time. I’m going to Sasquatch in a few months and love the Decemberists!

LINKS TO DIFFERENT SECTIONS ON A PAGE Called Named Anchors (each link has 2 parts) Look Like this LINK <a href="#NAME">Text to act as hypertext</a> NAMED <a name="NAME“ />Text to Link To <a href=“#Me”> About Me </a> <a href=“#Sports”> Sports </a> <a href=“#Hobbies”> Hobbies </a> <a name=“Me” />Hello, I’m a students at Tualatin HS. <a name=“Sports” /> I love running About Me Sports Hobbies Hello, I’m a student at Tualatin HS. …. I love running….

Example Site That Uses Anchored Links http://www.mcli.dist.maricopa.edu/tut/tut8d_ex/index.html

Lesson 4 Assignment If you don’t have your projects in separate folders, please do so at this time!!!! Create and open your project 4 folder and rename project3.html to project4.html Open project4.html with notepad++ Create 2 additional headings and add a paragraph of text to each sections.(here are some examples of section headings) My classes this semester What I want to do after high school What I like to do after school Separate the sections with horizontal lines

Lesson 4 Assignment Add links at the top of the page so that when you click on the link, it takes you to that section of the page. Go into your project 4 folder and make a folder called pictures. Move all your pictures into this folder. Now fix your html code so your pictures work again!