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

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

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.
HTML Basics Customizing your site using the basics of HTML.
Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5
How Tags are used to form your Web Page
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.
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.
Images By Tara Frieszell By Tara Frieszell. Adding images to your website will make it more interesting and add to the design. However, some viewers aren’t.
ETT 429 Spring 2007 Web Design I.
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
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 Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –
Overview of HTML. Three Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.
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.
Web Design HTML, Frontpage, DreamWeaver μέρος β ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου.
HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.
Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.
.  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.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
ACM 511 HTML Week -1 ACM 511 Course Notes. Books ACM 511 Course Notes.
1 Essential HTML coding By Fadi Safieddine (Week 2)
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
HTML Overview Part 4 – Tables 1. HTML Tables  Tables are defined with the tag pair.  A table is divided into rows with tag pairs. o tr stands for "table.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
Images in HTML PowerPoint How images are used in HTML.
Introduction to HTML Today we will look at: Separating style and content The purpose of a text editor such as Notepad How web-pages are made Creating a.
DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.
Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup 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.
Overview of HTML/XHTML Two Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.
Unit 2, cont. September 12 More HTML. Attributes Some tags are modifiable with attributes This changes the way a tag behaves Modifying a tag requires.
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
HTML: Hyptertext Markup Language Doman’s Sections.
Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
LEARNING HTML PowerPoint #1 Cyrus Saadat, Webmaster.
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”
HTML— More Tags, Formatting, and Lists. Formatting Tags  Bold  Italics  Underline  Big text  Small text  Subscript (H 2 O)  Superscript (10 3 )
Web Design. How do web pages work? Webpages are written in a code called HTML. Programs like Internet Explorer read the code, and then show it as a web.
Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.
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 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.
Web Development Lecture # 09 Text Formatting in HTML.
2.1 XHTML. Motto High thoughts must have high language. –Aristophanes.
HTML IMAGES. CONTENTS IMG Tag Alt Attribute Setting Width and Height Of An Image Summary Exercise.
Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
Spiderman ©Marvel Comics Creating Web Pages (part 1)
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
1 2/22/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Images and placing pages on the server.
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
REEM ALMOTIRI Information Technology Department Majmaah University.
Links and Images. Links HTML uses a hyperlink to link to another document on the Web A hyperlink can be either text or a picture Links are created with.
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.
This is a test Webpage Wow, I’m writing my first webpage.
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.
HTML basics
HTML Lesson 2.
HTML.
If You Know Nothing About HTML, This is Where You Start.
Pertemuan 1b
Making a website.
Presentation transcript:

Last week you should have had something that looked like this

Start tag

End tag

Content

for what type of document your page is

HTML tags

are for the headers

for the webpage name

tags are for….

…everything you want to display on the actual webpage

for Headings

Further Headings

for paragraphs

for bold

for italics

for underlined

Blank lines

Indentations (Press the TAB button)

 All images on your site need to be saved in your images folder  You can create sub folders to organise your images  For example an animals folder for all animal pictures  You can display all the common image types such as.JPG,.GIF and.PNG  Chose a PNG image over any other type!!!

No content? No end tag? /> acts as an ending

Attributes are inside the tag

src = path to the image

 How do we set the image we want to display?  Open up the folder explorer and go to where your web page is  Write down which folder(s) you’d need to go into to find your saved image  Separate each folder with a /  For example my cat picture is saved in the “images” folder.

This is why we make sure all our webpages are in the top folder, and all our images are in a sub folder! Imagine the mess if we didn’t have any structure!

alt= alternate text

 What if the image can’t be displayed?  Blind people  Slow Internet  You can set alt text by using the “alt” attribute

Height and width

 Your image might be way too big to fit nicely on the webpage  Can set the height and width in pixels  Good practice  The browser will reserve space for the images  If you don’t reserve space, the layout will change as the images display

 More W3Schools   Task  Open up the Images Worksheet presentation