Web Site Design Unit 11.3A: Web programming. Starter Activity O In pairs, name the 5 most things to think about when designing a website O You have 1.

Slides:

Advertisements

Similar presentations

3.02D HTML Overview 3.02 Develop webpages.

Advertisements

HTML Basics Customizing your site using the basics of HTML.

Learning HTML. > Title of page This is my first homepage. Tells Browser This is an HTML page Basic Tags Tells Browser End of HTML page Header information.

Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.

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

Today’s Goals What is HTML?

LIST- HYPERLINK- IMAGES

Computer Science 1611 Internet & Web Creating Webpages Hypertext and the HTML Markup Language.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

CM143 - Web Week 2 Basic HTML. Links and Image Tags.

 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

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.

Chapter 14 Introduction to HTML

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.

Links in HTML. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another web page on the same.

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 (HyperText Markup Language)

WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.

1 Essential HTML coding By Fadi Safieddine (Week 2)

 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.

Images in HTML PowerPoint How images are used in HTML.

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

CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.

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

F-1 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Extended Learning Module.

Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.

Course Content - Chapter 2 Introduction to HTML Introduction to a Text Editor as a web authoring tool Instructional Activity: Creating a webpage using.

Computing Theory: HTML Year 11. Lesson Objective You will: o Be able to define what HTML is - ALL o Be able to write HTML code to create your own web.

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

Hypertext Mark-Up Language Web Page Creation HTML.

HTML. Hypertext Markup Language Lesson Objectives 1. We will be able to understand the need for HTML and where it is used 2. We will be edit HTML to.

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

HTML: Hyptertext Markup Language Doman’s Sections.

WEB DESIGN AND PROGRAMMING Introduction to XHTML.

Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.

HTML & CSS BasicsHTMLCSSQuizAnswers  The logo In this website(made of html and css Codes), you will learn some basics of How to use HTML and CSS codes.

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.

Introduction to HTML UWWD. Agenda What do you need? What do you need? What are HTML, CSS, and tags? What are HTML, CSS, and tags? html, head, and body.

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)

This shows CIS17 and the first day introduction..

HTML HTML stands for Hyper Text Markup Language. HTML is used in making the base of a Website You can just use an online website maker like weebly.com.

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.

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.

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.

HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.

Web Site Design Unit 11.3A: Web programming. Tags and Elements O h1 O p O h6 O li O Ol O Ul O Strong O Bold O Emphasis O Sub O Sup O How many standard.

Unit 15 – Web Authoring Web Authoring Project.

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.

Introduction to HTML:.

Introduction to basic HTML

HTML GUIDE Press F5 and then

Intro to HTML Mr. Singh.

AN INTRODUCTORY LESSON TO MAKING A SIMPLE WEB PAGE By: RC Emily Solis

Chapter 4 - Introduction to XHTML: Part 1

Web Design and Development

Basic HTML and Embed Codes

Introduction to HTML- Basics

Intro to Web Development Links

HTML Structure.

Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.

Computer communications

WJEC GCSE Computer Science

Presentation transcript:

Web Site Design Unit 11.3A: Web programming

Starter Activity O In pairs, name the 5 most things to think about when designing a website O You have 1 minute…

Lesson Objectives 1. Learn what HTML is and how to use it 2. Learn how to create simple web pages 3. Learn how to identify web page components and coding

Main Activities O Open Notepad on your laptops O Open the PDF named Chapter 4 Web_Design sent to your nis-schools.com accountChapter 4 Web_Design O Start from page 33 in your PDF and work up to Activity 1

Web Design Theory Task O Using the link below, make notes in your copy books and answer the questions fully O Make sure to write each question before the answer or include the question into your answer O WikiBooks Web Design WikiBooks Web Design

Plenary 1. What does HTML stand for? 2. What is a Tag? 3. Name 3 types of Tag 4. What is the most important part of web design? 5. What is the difference between.txt and.html?

Extended Links O O O O ict.com/gcse_new/software/web_design/miniweb/index.ht m ict.com/gcse_new/software/web_design/miniweb/index.ht m O ict.com/gcse_new/software/web_design/quiz/walkplank_ web_design.htm ict.com/gcse_new/software/web_design/quiz/walkplank_ web_design.htm O

Tags and Elements O h1 O p O h6 O li O Ol O Ul O Strong O Bold O Emphasis O Sub O Sup O How many standard colours exist?

Images and Links Tags O O The tag is the one used to make hyperlinks (or just links) on webpages. These are the words or images you click to go to a new page! O O src stands for "source." It tells the link where the picture comes from!

Images and Link Tags O. This tag is a bit different from the others. Instead of putting the content between the tags, you tell the tag where to get the picture using O href stands for "hypertext reference." O Remember that hypertext (that is, links) is text you can click on? O Well, href tells that link where to go! O The text after href is the web address, and the text between and is the text you click on.

Links to W3schools, codecademy and code.he.net O O O O ict.com/gcse_new/software/web_design/miniweb/index.ht m ict.com/gcse_new/software/web_design/miniweb/index.ht m O ict.com/gcse_new/software/web_design/quiz/walkplank_ web_design.htm ict.com/gcse_new/software/web_design/quiz/walkplank_ web_design.htm O

Vocab Defintions O amaya O dreamweaver O notepad O body O head O Ordered list O body O Heading1 O strong O bold O heading6 O tag O browser O href O title O code O HTML O unordered list O Codeacademy O hyperlink O url O CSS O list

Nested Link – a link inside a link O Tacos! O Tacos

Website Creation O Using Amaya, build Computers & Society website O You need a home page O Section(page) for each topic: 1. AI 2. Biometrics 3. Health & Safety 4. Ergonomics 5. Copyright 6. Expert systems

Web page design O On each page you should have the following; O Title of Web page O Definition of page topic (Biometrics) O Examples of the technology or the topic O Images and links to another resources

Code Academy CSS Exercises O Sign in and complete the Codecademy HTML exercises to all 3 levels O Extension: O beginner-en- TlhFi?curriculum_id=50579fb998b dc8b beginner-en- TlhFi?curriculum_id=50579fb998b dc8b

Web Site Design Unit 11.3A: Web programming

Building your website in Dreamweaver O Using Dreamweaver, build Computers & Society website O You need a home page O Section(page) for each topic: O AI O Biometrics O Health & Safety O Ergonomics O Copyright O Expert systems

Lesson Objectives Create HTML and CSS files in Dreamweaver CS6 Attach CSS files to existing HTML pages Create Rollover Images to display multiple images in your browser

Dreamweaver Demo O Take notes O Take notes as you are watching the Dreamweaver demonstration O You will learn how to use Dreamweaver to build and improve your website O You can access notes and resources from the shared area on the school network and from computerscienceastana.weebly.com computerscienceastana.weebly.com

Dreamweaver links Watch these videos tonight at home to give you an idea how Dreamweaver works There are 6 parts from beginner to intermediate level =PL35C2AE0B07BB4E9B Abode TV

Week Plan O Wednesday – Codecademy HTML and CSS exercises O Thursday – Dreamweaver demo and site building O Friday – 1 st lesson – complete O 2 nd lesson – wikibooks notes, questions and exercises in notebooks

Meta Tags in HTML Read the article below, taking notes and prepare to discuss the main points How-To-Use-HTML-Meta-Tags