HTML (Hypertext Mark-up language) Basic Coding

Size: px
Start display at page:

Download "HTML (Hypertext Mark-up language) Basic Coding"

Transcription

1 HTML (Hypertext Mark-up language) Basic Coding

2 What is HTML? HTML is a short term for hypertext mark-up language. HTML is used for website development. HTML works as the base structure and text format for a website.

3 How do I start HTML? All you need to get started is to use your computer s Notepad. Start by searching and open your computer s Notepad. That is all you will need in order to program HTML and you can review your coding results as you go!

4 Before you start, you need to understand these: HTML core structure tags consists of <html>, <head>, <body>. <html> = root element of an HTML page. <head> = contains meta information about the document. <body> = showing contents on the webpage. <title> = title of the HTML document. <h1> = header text format. <p> = paragraph text format. Every elements starts with <> and ends with </> to indicate it is finished

5 Write your first HTML code! Write the following code in your notepad: <html> <head> <title>page Title</title> </head> <body> This is what it looks like on your notepad: <h1>my First Heading</h1> <p>my first paragraph.</p>

6 Code explanation *Every HTML tags comes in pairs, for example <head></head> or <p></p>, it needs to be close with </> once the content is finished. * It is the root element, indicating that this is a HTML formatted document. Contains contents that is available to see in the webpage. Large heading text format. <html> <head> <title>page Title</title> </head> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> Contains information from different document or having title in the HTML file. Title for the document Defines as a paragraph

7 How to view your first ever website? (more explanation on next slide) On top of your computer notepad s tab, click on file. Under file, select Save As There will be file name and save as type Select all files in save as type Under file name, write anything you want and end it with.html for example (myfirstwebsite.html) Click save.

8 Save the HTML Page Save the file on your computer. Select File > Save as in the Notepad menu. Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files). *You can use either.htm or.html as file extension. There is no difference, it is up to you.

9 Preview your HTML website When you save your file in HTML format, it will look something like this : Double click on it to preview the outcome.

10 This should be the outcome of the preview <html> <head> <title>page Title</title> </head> <body> <h1>my First Heading</h1> <p>my first paragraph.</p>

11 HTML Headings <h1> to <h6> <html> <body> <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> <h4>this is heading 4</h4> <h5>this is heading 5</h5> <h6>this is heading 6</h6> This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

12 Line Break <br> The HTML <br> element defines a line break. Use <br> if you want a line break (a new line) without starting a new paragraph: <html> <body> <p>this is<br>a paragraph<br>with line breaks</p> This is a paragraph with line breaks

13 Background Colour <html> <body style="backgroundcolor:blue;"> This is a heading This is a paragraph. <h1>this is a heading</h1> <p>this is a paragraph.</p>

14 HTML Text Colour <html> <body> <h1 style="color:blue;">this is a heading</h1> This is a heading This is a paragraph. <p style="color:red;">this is a paragraph.</p>

15 HTML Text Size <html> <body> <h1 style="fontfamily:verdana;">this is a heading</h1> <p style="fontfamily:courier;">this is a paragraph.</p> This is a heading This is a paragraph.

16 Text Alignment <html> <body> <h1 style="textalign:center;">centered Heading</h1> <p style="textalign:center;">centered paragraph.</p> Centered Heading Centered paragraph.

17 Comment Tags <! comment - -> <html> <body> <!-- This is a comment --> <p>this is a paragraph.</p> <!-- Comments are not displayed in the browser --> *With comments you can place notifications and reminders in your HTML: Note: Comments are not displayed by the browser, but they can help document your HTML source code.

18 Colour Names <html> <body> <h2 style="backgroundcolor:red"> Background-colour set by using red </h2> Background-colour set by using red

19 HTML Hyper Link HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand. Note: A link does not have to be text. It can be an image or any other HTML element. In HTML, links are defined with the <a> tag: <a href="url">link text</a> <html> <body> <p> <a href=" ">Visit Google webpage</a> </p> Visit Google webpage

20 HTML Image <html> <body> <h2>my Drawing </h2> <img src="my_drawing.jpg" alt="cute Drawing" style="width:304px;height:228px; "> There are a few image formats that can be used in HTML example: PNG, JPEG & GIF. PNG do not have white background at the back of the image JPEG/JPG have white background at the back of the image GIF Image that supports both animation and static images My Drawing

21 Background Image <html> <body background= myimage.jpg > <p> Hello </p>

22 Google Map Embed Google Search Google Map Type any address or location on the search bar Click on the share icon Select embed map Copy and Paste the embed code into your html (make sure it is within the <body>)

23 CSS Round Image <style> img{ border radius:50%; } </style>

24 Hover Effect (Opacity) <style> img: hover { opacity:0.5; filter: alpha(opacity=50); } </style> <img src = myimage.jpg width= 150 height= 120 >

25 Text Shadow Effect <style> h1{ text-shadow: 2px 2px 5px red; } </style>

INTRODUCTION TO WEB USING HTML What is HTML?

INTRODUCTION TO WEB USING HTML What is HTML? Geoinformation and Sectoral Statistics Section (GiSS) INTRODUCTION TO WEB USING HTML What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language

More information

Web Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.

Web Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph. What is HTML? Web Design 101 HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language à A markup language is a set of markup tags The tags describe

More information

WEB APPLICATION. XI, Code- 803

WEB APPLICATION. XI, Code- 803 WEB APPLICATION XI, Code- 803 Part A 1. Communication & its methods 2. Importance of communication 3. Factors effecting communication skills. 1. Communication Communication is a vital (Important) part

More information

Introduction to Computer Science (I1100) Internet. Chapter 7

Introduction to Computer Science (I1100) Internet. Chapter 7 Internet Chapter 7 606 HTML 607 HTML Hypertext Markup Language (HTML) is a language for creating web pages. A web page is made up of two parts: the head and the body. The head is the first part of a web

More information

It is possible to create webpages without knowing anything about the HTML source behind the page.

It is possible to create webpages without knowing anything about the HTML source behind the page. What is HTML? HTML is the standard markup language for creating Web pages. HTML is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in

More information

Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen

Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen https://www.halvorsen.blog Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen History of the Web Internet (1960s) World Wide Web - WWW (1991) First Web Browser - Netscape,

More information

The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data.

The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data. Review The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data. It is not the internet! It is a service of the internet.

More information

Programmazione Web a.a. 2017/2018 HTML5

Programmazione Web a.a. 2017/2018 HTML5 Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text

More information

Introduction to Computer Science (I1100) Internet. Chapter 7

Introduction to Computer Science (I1100) Internet. Chapter 7 Internet Chapter 7 606 HTML 607 HTML Hypertext Markup Language (HTML) is a language for creating web pages. A web page is made up of two parts: the head and the body. The head is the first part of a web

More information

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية HTML Mohammed Alhessi M.Sc. Geomatics Engineering Wednesday, February 18, 2015 Eng. Mohammed Alhessi 1 W3Schools Main Reference: http://www.w3schools.com/ 2 What is HTML? HTML is a markup language for

More information

Introduction to HTML

Introduction to HTML Introduction to HTML What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements

More information

o Line Breaks </body> </html> This is heading 1 This is some text. This is heading 2 This is some other text. This is heading 2

o Line Breaks </body> </html> This is heading 1 This is some text. This is heading 2 This is some other text. This is heading 2 o Displaying lines of text: This paragraph contains a lot of lines in the source code, but the browser ignores it. This paragraph contains a lot of lines in the source code, but the browser ignores

More information

HTML, CSS, JavaScript

HTML, CSS, JavaScript HTML, CSS, JavaScript Encoding Information: There s more! Bits and bytes encode the information, but that s not all Tags encode format and some structure in word processors Tags encode format and some

More information

Scientific Communication CITS4008. Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens

Scientific Communication CITS4008. Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens Scientific Communication CITS4008 Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens Proposed in 1989 by Tim Lee at CERN Mosaic released in 1993 Working group to define

More information

Markup Language SGML: Standard Generalized Markup Language. HyperText Markup Language (HTML) extensible Markup Language (XML) TeX LaTeX

Markup Language SGML: Standard Generalized Markup Language. HyperText Markup Language (HTML) extensible Markup Language (XML) TeX LaTeX HTML 1 Markup Languages A Markup Language is a computer language in which data and instructions describing the structure and formatting of the data are embedded in the same file. The term derives from

More information

HTML Text Formatting. HTML Session 2 2

HTML Text Formatting. HTML Session 2 2 HTML Session 2 HTML Text Formatting HTML also defines special elements for defining text with a special meaning. - Bold text - Important text - Italic text - Emphasized text

More information

Web Engineering (Lecture 01)

Web Engineering (Lecture 01) Web Engineering (Lecture 01) By: Kamran Ullah Lecturer (CS) Class BS(CS)-5 th semester Web Engineering Definition 1: Web Engineering is the application of systematic and disciplined approaches to the design,

More information

WEBSITE DEVELOPMENT CODERDOJO ATHENRY 2014

WEBSITE DEVELOPMENT CODERDOJO ATHENRY 2014 WEBSITE DEVELOPMENT CODERDOJO ATHENRY 2014 HOW TO DEVELOP A WEBSITE??? WE ALL LOVE TO GO ON THE INTERNET AND LOOK AT OUR FAVORITE WEBSITES! HAVE YOU EVER WONDERED HOW THESE WEB PAGES ARE CREATED? THEY

More information

CREATING A WEBSITE USING CSS. Mrs. Procopio CTEC6 MYP1

CREATING A WEBSITE USING CSS. Mrs. Procopio CTEC6 MYP1 CREATING A WEBSITE USING CSS Mrs. Procopio CTEC6 MYP1 HTML VS. CSS HTML Hypertext Markup Language CSS Cascading Style Sheet HTML VS. CSS HTML is used to define the structure and content of a webpage. CSS

More information

CMPT 165 Unit 2 Markup Part 2

CMPT 165 Unit 2 Markup Part 2 CMPT 165 Unit 2 Markup Part 2 Sept. 17 th, 2015 Edited and presented by Gursimran Sahota Today s Agenda Recap of materials covered on Tues Introduction on basic tags Introduce a few useful tags and concepts

More information

STD 7 th Paper 1 FA 4

STD 7 th Paper 1 FA 4 STD 7 th Paper 1 FA 4 Choose the correct option from the following 1 HTML is a. A Data base B Word Processor C Language D None 2 is a popular text editor in MS window A Notepad B MS Excel C MS Outlook

More information

1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5

1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5 Name Date Final Exam Prep Questions Worksheet #1 1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5 2. Which of the following

More information

Website Creating Content

Website Creating Content CREATING WEBSITE CONTENT As an administrator, you will need to know how to create content pages within your website. This document will help you learn how to: Create Custom Pages Edit Content Areas Creating

More information

CREATING A BUTTON IN PHOTOSHOP

CREATING A BUTTON IN PHOTOSHOP CREATING A BUTTON IN PHOTOSHOP Step 1: Create the Photoshop Document Our button will be exactly 170px wide and 50px tall, but we ll make a bigger canvas (600x600px) so that we have some breathing room

More information

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10 CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties

More information

MODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( )

MODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( ) MODULE 2 HTML 5 FUNDAMENTALS HyperText > Douglas Engelbart (1925-2013) Tim Berners-Lee's proposal In March 1989, Tim Berners- Lee submitted a proposal for an information management system to his boss,

More information

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags Recap on HTML and creating our template file Introduction

More information

Creating Web Pages Using Netscape Composer AGENDA FOR THIS WORKSHOP. 1. How does it all work? 2. What do I need to get started at Fairfield?

Creating Web Pages Using Netscape Composer AGENDA FOR THIS WORKSHOP. 1. How does it all work? 2. What do I need to get started at Fairfield? Creating Web Pages Using Netscape Composer AGENDA FOR THIS WORKSHOP 1. How does it all work? 2. What do I need to get started at Fairfield? 3. What is HTML coding? 4. The 10 HTML Tags that you should know.

More information

All Creative Designs. Basic HTML for PC Tutorial Part 1 Using MS Notepad (Version May 2013) My First Web Page

All Creative Designs. Basic HTML for PC Tutorial Part 1 Using MS Notepad (Version May 2013) My First Web Page All Creative Designs Basic HTML for PC Tutorial Part 1 Using MS Notepad (Version May 2013) My First Web Page Step by step instructions to build your first web page Brief Introduction What is html? The

More information

HTML and CSS COURSE SYLLABUS

HTML and CSS COURSE SYLLABUS HTML and CSS COURSE SYLLABUS Overview: HTML and CSS go hand in hand for developing flexible, attractively and user friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page

More information

CSS MOCK TEST CSS MOCK TEST III

CSS MOCK TEST CSS MOCK TEST III http://www.tutorialspoint.com CSS MOCK TEST Copyright tutorialspoint.com This section presents you various set of Mock Tests related to CSS. You can download these sample mock tests at your local machine

More information

How the Internet Works

How the Internet Works How the Internet Works The Internet is a network of millions of computers. Every computer on the Internet is connected to every other computer on the Internet through Internet Service Providers (ISPs).

More information

Downloads: Google Chrome Browser (Free) - Adobe Brackets (Free) -

Downloads: Google Chrome Browser (Free) -   Adobe Brackets (Free) - Week One Tools The Basics: Windows - Notepad Mac - Text Edit Downloads: Google Chrome Browser (Free) - www.google.com/chrome/ Adobe Brackets (Free) - www.brackets.io Our work over the next 6 weeks will

More information

Web Publishing with HTML

Web Publishing with HTML Web Publishing with HTML MSc Induction Tutorials Athena Eftychiou PhD Student Department of Computing 1 Objectives Provide a foundation on Web Publishing by introducing basic notations and techniques like

More information

Unit 8. Lesson 8.1. Microsoft FrontPage. Introduction. Microsoft FrontPage-1. Microsoft FrontPage

Unit 8. Lesson 8.1. Microsoft FrontPage. Introduction. Microsoft FrontPage-1. Microsoft FrontPage Microsoft FrontPage Unit 8 Microsoft FrontPage Introduction Lesson 8.1 Microsoft FrontPage-1 A number of Software Packages are available in market for creating a website. Among popular software s are Dreamweaver,

More information

Lesson 5 Introduction to Cascading Style Sheets

Lesson 5 Introduction to Cascading Style Sheets Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition 1 Objectives Create a Cascading Style Sheet. Control hyperlink behavior with CSS. Create style classes. Share style classes

More information

Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM Advanced Internet Technology Lab.

Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM Advanced Internet Technology Lab. Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM 5049 Advanced Internet Technology Lab Lab # 1 Eng. Haneen El-masry February, 2015 Objective To be familiar with

More information

HTML Hyperlinks (Links)

HTML Hyperlinks (Links) WEB DESIGN HTML Hyperlinks (Links) The HTML tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the

More information

introduction to XHTML

introduction to XHTML introduction to XHTML XHTML stands for Extensible HyperText Markup Language and is based on HTML 4.0, incorporating XML. Due to this fusion the mark up language will remain compatible with existing browsers

More information

Comp-206 : Introduction to Software Systems Lecture 22. Alexandre Denault Computer Science McGill University Fall 2006

Comp-206 : Introduction to Software Systems Lecture 22. Alexandre Denault Computer Science McGill University Fall 2006 HTTP and HTML Comp-206 : Introduction to Software Systems Lecture 22 Alexandre Denault Computer Science McGill University Fall 2006 15 / 55 Mercury Subversion Directory The URL for the class subversion

More information

What You Will Learn Today

What You Will Learn Today CS101 Lecture 03: The World Wide Web and HTML Aaron Stevens 23 January 2011 1 What You Will Learn Today Is it the Internet or the World Wide Web? What s the difference? What is the encoding scheme behind

More information

Hyper Text Markup Language

Hyper Text Markup Language Hyper Text Markup Language HTML is a markup language. It tells your browser how to structure the webpage. HTML consists of a series of elements, which you use to enclose, or mark up different parts of

More information

Mark Scheme. June Pearson Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web

Mark Scheme. June Pearson Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web Mark Scheme June 016 Pearson Level Certificate in Digital Applications Unit 5: Coding for the Web General marking guidance All candidates must receive the same treatment. Examiners must mark the first

More information

Fireworks 3 Animation and Rollovers

Fireworks 3 Animation and Rollovers Fireworks 3 Animation and Rollovers What is Fireworks Fireworks is Web graphics program designed by Macromedia. It enables users to create any sort of graphics as well as to import GIF, JPEG, PNG photos

More information

Creating Web Pages. Getting Started

Creating Web Pages. Getting Started Creating Web Pages Getting Started Overview What Web Pages Are How Web Pages are Formatted Putting Graphics on Web Pages How Web Pages are Linked Linking to other Files What Web Pages Are Web Pages combine

More information

How to set up a local root folder and site structure

How to set up a local root folder and site structure Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where

More information

HTML5 & CSS 8 th Edition. Chapter 2 Building a Webpage Template with HTML5

HTML5 & CSS 8 th Edition. Chapter 2 Building a Webpage Template with HTML5 HTML5 & CSS 8 th Edition Chapter 2 Building a Webpage Template with HTML5 Objectives 1. Explain how to manage website files 2. Describe and use HTML5 semantic elements 3. Determine the elements to use

More information

Cadbury World Themed Web Page

Cadbury World Themed Web Page Cadbury World Themed Web Page HTML Creating Your Own Web Page more advanced What have we learnt so far? HTML is used to instruct readers such as web browsers how to present, process and/ or describe the

More information

DREAMWEAVER QUICK START TABLE OF CONTENT

DREAMWEAVER QUICK START TABLE OF CONTENT DREAMWEAVER QUICK START TABLE OF CONTENT Web Design Review 2 Understanding the World Wide Web... 2 Web Browsers... 2 How Browsers Display Web pages... 3 The Web Process at Sacramento State... 4 Web Server

More information

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1 Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 1 What will we cover? HTML - Website Structure and Layout CSS - Website Style JavaScript - Makes our Website Dynamic and Interactive Plan

More information

MPT Web Design. Week 1: Introduction to HTML and Web Design

MPT Web Design. Week 1: Introduction to HTML and Web Design MPT Web Design Week 1: Introduction to HTML and Web Design What will we do in this class? Learn the basics of HTML and how to create our own template Basic website structure Learn design concepts for a

More information

Html basics Course Outline

Html basics Course Outline Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and

More information

Cooperative activities

Cooperative activities The content of computer distribution of the second grade of prep. First term 2016-2017 The week Subject Cooperative activities 1 Web sites 2 3 4 5 6 Stages of design and construction website Creating and

More information

Mark Scheme. Edexcel Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web

Mark Scheme. Edexcel Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web Mark Scheme Edexcel Certificate in Digital Applications Unit 5: Coding for the Web General marking guidance All candidates must receive the same treatment. Examiners must mark the first candidate in exactly

More information

UNIX and Operating System Topics

UNIX and Operating System Topics UNIX and Operating System Topics 1. What is SFTP? Name software applications that provide sftp service 2. What does SSH mean? How do you use ssh? 3. What is a Terminal window on the Mac? Why/when do you

More information

Web Designing HTML5 NOTES

Web Designing HTML5 NOTES Web Designing HTML5 NOTES HTML Introduction What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages

More information

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special.

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special. This section describes how to add content to your pages including text, Microsoft Office documents, images, Flash, and other media content. Inserting Text To add text to your document, you can type the

More information

A Dreamweaver Tutorial. Contents Page

A Dreamweaver Tutorial. Contents Page A Dreamweaver Tutorial Contents Page Page 1-2 Things to do and know before we start Page 3-4 - Setting up the website Page 5 How to save your web pages Page 6 - Opening an existing web page Page 7 - Creating

More information

Hyper Text Markup Language

Hyper Text Markup Language Hyper Text Markup Language HTML is a markup language. It tells your browser how to structure the webpage. HTML consists of a series of elements, which you use to enclose, or mark up different parts of

More information

Motivation (WWW) Markup Languages (defined). 7/15/2012. CISC1600-SummerII2012-Raphael-lec2 1. Agenda

Motivation (WWW) Markup Languages (defined). 7/15/2012. CISC1600-SummerII2012-Raphael-lec2 1. Agenda CISC 1600 Introduction to Multi-media Computing Agenda Email Address: Course Page: Class Hours: Summer Session II 2012 Instructor : J. Raphael raphael@sci.brooklyn.cuny.edu http://www.sci.brooklyn.cuny.edu/~raphael/cisc1600.html

More information

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) Horizontal Rule Element

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) Horizontal Rule Element Web Development & Design Foundations with HTML5 Ninth Edition Chapter 4 Visual Elements and Graphics Learning Objectives (1 of 2) 4.1 Create and format lines and borders on web pages 4.2 Apply the image

More information

AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?

More information

E , Fall 2007 More with stylesheets

E , Fall 2007 More with stylesheets I hope that you ll appreciate my use of the waterfall both as a way to calm your frayed nerves and to provide you with a metaphor for the style sheets In this document, I d like to step back a little and

More information

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster. Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.

More information

HTML OBJECTIVES WHAT IS HTML? BY FAITH BRENNER AN INTRODUCTION

HTML OBJECTIVES WHAT IS HTML? BY FAITH BRENNER AN INTRODUCTION HTML AN INTRODUCTION BY FAITH BRENNER 1 OBJECTIVES BY THE END OF THIS LESSON YOU WILL: UNDERSTAND HTML BASICS AND WHAT YOU CAN DO WITH IT BE ABLE TO USE BASIC HTML TAGS BE ABLE TO USE SOME BASIC FORMATTING

More information

HTML, beyond the basics

HTML, beyond the basics HTML, beyond the basics HTML Classes and IDs Classes are attributes that attach information to an element so you can do more things with some or all elements that belong to a certain class. IDs, like classes,

More information

THE HITCHHIKERS GUIDE TO HTML

THE HITCHHIKERS GUIDE TO HTML THE HITCHHIKERS GUIDE TO HTML Computer Science I Designing technology solutions Mr. Barrett http://thestrategicblogger.com/ What is HTML Hyper Text Markup Language (HTML) is a markup language for describing

More information

Very Basics of HTML. G day mates during this tutorial I will teach you the basics of HTML.

Very Basics of HTML. G day mates during this tutorial I will teach you the basics of HTML. Very Basics of HTML Basics of HTML G day mates during this tutorial I will teach you the basics of HTML. Frequently Asked Questions What does HTML actually stand for? HTML stands for Hyper Text Markup

More information

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually

More information

HTML/XML. XHTML Authoring

HTML/XML. XHTML Authoring HTML/XML XHTML Authoring Adding Images The most commonly used graphics file formats found on the Web are GIF, JPEG and PNG. JPEG (Joint Photographic Experts Group) format is primarily used for realistic,

More information

Attributes & Images 1 Create a new webpage

Attributes & Images 1 Create a new webpage Attributes & Images 1 Create a new webpage Open your test page. Use the Save as instructions from the last activity to save your test page as 4Attributes.html and make the following changes:

More information

AGENDA. HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION <nav> :: CSS CODING FOR HOMEPAGE [ <nav> & child elements ] CLASS :: 13.

AGENDA. HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION <nav> :: CSS CODING FOR HOMEPAGE [ <nav> & child elements ] CLASS :: 13. :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES CLASS :: 13 04.26 2017 3 Hours AGENDA HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION home works

More information

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148 Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,

More information

recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)

recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags in its

More information

11. HTML5 and Future Web Application

11. HTML5 and Future Web Application 11. HTML5 and Future Web Application 1. Where to learn? http://www.w3schools.com/html/html5_intro.asp 2. Where to start: http://www.w3schools.com/html/html_intro.asp 3. easy to start with an example code

More information

HTML. Hypertext Markup Language. Code used to create web pages

HTML. Hypertext Markup Language. Code used to create web pages Chapter 4 Web 135 HTML Hypertext Markup Language Code used to create web pages HTML Tags Two angle brackets For example: calhoun High Tells web browser ho to display page contents Enter with

More information

HTML MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University

HTML MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University HTML MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University 2 HTML Quiz Date: 9/13/18 in two weeks from now HTML, CSS 14 steps, 25 points 1 hour 20 minutes Use class workstations

More information

Unit Four (Hyper Text Markup Language) HTML. Lesson One Create Web Pages by Using HTML

Unit Four (Hyper Text Markup Language) HTML. Lesson One Create Web Pages by Using HTML Unit Four (Hyper Text Markup Language) HTML Lesson One Create Web Pages by Using HTML After finishing this lesson the student will be able to: Identify the following basic rules to create a web page By

More information

Student, Perfect CS-081 Final Exam May 21, 2010 Student ID: 9999 Exam ID: 3122 Page 1 of 6 Instructions:

Student, Perfect CS-081 Final Exam May 21, 2010 Student ID: 9999 Exam ID: 3122 Page 1 of 6 Instructions: Student ID: 9999 Exam ID: 3122 Page 1 of 6 Instructions: Use pencil. Answer all questions: there is no penalty for guessing. Unless otherwise directed, circle the letter of the one best answer for multiplechoice

More information

The City School. Prep Section. ICTech. 2 nd Term. PAF Chapter. Class 8. Worksheets for Intervention Classes

The City School. Prep Section. ICTech. 2 nd Term. PAF Chapter. Class 8. Worksheets for Intervention Classes The City School PAF Chapter Prep Section ICTech Class 8 2 nd Term Worksheets for Intervention Classes Name: Topic: Flowchart Date: Q. Write the name and description of the following symbol. Symbol Name

More information

The City School. Prep Section. ICTech. 2 nd Term. PAF Chapter. Class 7. Worksheets for Intervention Classes

The City School. Prep Section. ICTech. 2 nd Term. PAF Chapter. Class 7. Worksheets for Intervention Classes The City School PAF Chapter Prep Section ICTech Class 7 2 nd Term Worksheets for Intervention Classes Name: Topic: Scratch Date: Q.1: Label the diagram 1 2 3 4 5 6 7 12 8 9 11 10 1. 2. 3. 4. 5. 6. 7. 8.

More information

CSC 121 Computers and Scientific Thinking

CSC 121 Computers and Scientific Thinking CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language

More information

Styles, Style Sheets, the Box Model and Liquid Layout

Styles, Style Sheets, the Box Model and Liquid Layout Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of

More information

Review Ch. 17 Creating Online Pages and Sites. 2010, 2006 South-Western, Cengage Learning

Review Ch. 17 Creating Online Pages and Sites. 2010, 2006 South-Western, Cengage Learning Review Ch. 17 Creating Online Pages and Sites 2010, 2006 South-Western, Cengage Learning Web Browsers Software programs that allow users to find and view web pages Web browsers interpret HTML and XML to

More information

Mark Scheme (Results)

Mark Scheme (Results) Mark Scheme (Results) Pearson Edexcel Certificate in Digital Applications Unit 5: Coding for the Web Edexcel and BTEC Qualifications Edexcel and BTEC qualifications are awarded by Pearson, the UK s largest

More information

Training Sister Hicks

Training Sister Hicks VMT CONSULTING Hand-out Vernell Turner 5/18/2016 2 Training Agenda 1. Images 2. Web Pages General 3. FBH Website 3 Images Tips for Using Images in a MS Word Document: 1. Type your text first before inserting

More information

c122jan2714.notebook January 27, 2014

c122jan2714.notebook January 27, 2014 Internet Developer 1 Start here! 2 3 Right click on screen and select View page source if you are in Firefox tells the browser you are using html. Next we have the tag and at the

More information

(1) I (2) S (3) P allow subscribers to connect to the (4) often provide basic services such as (5) (6)

(1) I (2) S (3) P allow subscribers to connect to the (4) often provide basic services such as (5) (6) Collection of (1) Meta-network That is, a (2) of (3) Uses a standard set of protocols Also uses standards d for structuring t the information transferred (1) I (2) S (3) P allow subscribers to connect

More information

Independence Community College Independence, Kansas

Independence Community College Independence, Kansas Independence Community College Independence, Kansas C O N T E N T S Unit 1: Creating, Modifying, and Enhancing FrontPage Webs and Pages 1 Chapter 1 Investigating FrontPage 2002 3 Exploring World Wide Web

More information

Create a three column layout using CSS, divs and floating

Create a three column layout using CSS, divs and floating GRC 275 A6 Create a three column layout using CSS, divs and floating Tasks: 1. Create a 3 column style layout 2. Must be encoded using HTML5 and use the HTML5 semantic tags 3. Must se an internal CSS 4.

More information

Dreamweaver Basics Outline

Dreamweaver Basics Outline Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working

More information

Objective % Select and utilize tools to design and develop websites.

Objective % Select and utilize tools to design and develop websites. Objective 207.02 8% Select and utilize tools to design and develop websites. Hypertext Markup Language (HTML) Basic framework for all web design. Written using tags that a web browser uses to interpret

More information

Announcements. 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted

Announcements. 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted Announcements 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted 2. Install Komodo Edit on your computer right away. 3. Bring laptops to next class

More information

Introduction, Notepad++, File Structure, 9 Tags, Hyperlinks 1

Introduction, Notepad++, File Structure, 9 Tags, Hyperlinks 1 Introduction, Notepad++, File Structure, 9 Tags, Hyperlinks 1 Introduction to HTML HTML, which stands for Hypertext Markup Language, is the standard markup language used to create web pages. HTML consists

More information

The figure below shows the Dreamweaver Interface.

The figure below shows the Dreamweaver Interface. Dreamweaver Interface Dreamweaver Interface In this section you will learn about the interface of Dreamweaver. You will also learn about the various panels and properties of Dreamweaver. The Macromedia

More information

Adding Audio and Video Content to Web pages. Audio Content - Add some Audio content to your page. Audio & Video 1

Adding Audio and Video Content to Web pages. Audio Content - Add some Audio content to your page. Audio & Video 1 Audio & Video 1 Adding Audio and Video Content to Web pages Create a new page in your Notepad++ and name it 6AV: audio & Video

More information

ADOBE DREAMWEAVER CS4 BASICS

ADOBE DREAMWEAVER CS4 BASICS ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,

More information

Your Own Web Page; Quick and Dirty Via Mashup Reminder: Next Quiz on 4/15

Your Own Web Page; Quick and Dirty Via Mashup Reminder: Next Quiz on 4/15 Your Own Web Page; Quick and Dirty Via Mashup Reminder: Next Quiz on 4/15 A Special Language for the Web In the early 1990 s web pages were mostly described using a special purpose language, called Hyper-Text

More information

PowerPoint 2010 Quick Start to a Presentation

PowerPoint 2010 Quick Start to a Presentation PowerPoint 2010 Quick Start to a Presentation Backstage View Button Similar to old File button 1 On opening a new presentation, from Slides choose a Layout for a particular template, e.g. a title page.

More information

ICT IGCSE Practical Revision Presentation Web Authoring

ICT IGCSE Practical Revision Presentation Web Authoring 21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:

More information