Essentials of HTML.

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

Anatomy of a Web Page. Parts of a Web Page Title Bar Navigation Tool Bar Location Bar Header Graphic/Image Text Horizontal Rule Links.
HTML Basics Customizing your site using the basics of HTML.
Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.
Introduction to HTML & CSS
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: 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.
HTML: HyperText Markup Language Hello World Welcome to the world!
MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Chapter 8 Creating Style Sheets.
How Tags are used to form your Web Page
COMP101 – Exploring Multimedia and Internet Computing LA2 (Thu 14:00 – 16:50) TA: Jackie Lo.
4.01 Cascading Style Sheets
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
Creating Tables in a Web Site Using an External Style Sheet
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 & CSS A brief introduction. OUTLINE 1.What is HTML? 2.What is CSS? 3.How are they used together? 4.Troubleshooting/Common problems 5.More resources.
Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple.
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.
Creating your Webpage with tables. This is a 2 column by 1 row table!
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
Web Design I Spring 2009 Kevin Cole Gallaudet University
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.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
CHAPTER 1 HTML & HTML5 I อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.
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.
Learning HTML Presented By: Wayne Helle What Is HTML? Learning Basic Tags... Formating Your Text... Working With Images and Links... Simple Form Boxes..
HTML: Hyptertext Markup Language Doman’s Sections.
Professor Waterman Cascading Style Sheets (CSS) is a language that works with HTML documents to define the way content is presented. The presentation.
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”
Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.
Quick Questions 1. What does HTML stand for? 2. What are the three main languages of the Web? 3. What is the purpose of the tags? 4. Why do we indent different.
Cascading Style Sheets
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
University of South Asia Course Name: Web Application Prepared By: Md Rezaul Huda Reza
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Introduction to Web Authoring Ellen Cushman /wra210.htm Class mtg. #2.
Your HTML website creating your first html file. Creating an HTML FIle Open note pad from accessories, programs. Write code. Save and view. In 3 Steps.
CPSC 203 Introduction to Computers Lab 23 By Jie Gao.
CSS IS A LANGUAGE DESIGNED TO TARGET HTML ELEMENTS AND NODES BY TYPE, CLASS, ID AND VALUE, AND CHANGE THEIR VALUES CSS – change how your HTML looks and.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
Creating Web Pages with Links, Images, and Embedded Style Sheets
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.
1 HTML. 2 Full forms WWW – world Wide Web HTTP – Hyper Text Transfer Protocol HTML – Hyper Text Markup Language.
Tutorial 5 Working with Web Tables. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Learn and Apply the structure of.
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.
Week 1: Introduction to HTML and Web Design
Web Basics: HTML/CSS/JavaScript What are they?
4.01 Cascading Style Sheets
Web Authoring (Ski Resort Task)
Essentials of HTML.
HTML.
5.2.3 Be able to use HTML and CSS to construct web pages
Basic HTML and Embed Codes
Web Design and Development
Creating Tables in a Web Site
Lesson 4 – Introduction to CSS
BUILDING A WEBSITE 7.4.2: Basics of HTML and CSS.
Hyperlinks 1 2.
Johan Ng and Muhammad Hazzry
Creating your first website
4.01 Cascading Style Sheets
Creating your website and learning HTML
Presentation transcript:

Essentials of HTML

Lesson Objectives: 01 02 03 04 05 06 Continue learning HTML Revise HTML Structure Adding images Linking Pages Adding Tables Adding Color

1 Minute Strategy Build up the HTML sweet home Structure using the HTML main blocks within one minute?

1. Add Images

Adding image Image from computer Image from folder Image from web

Adding image from the Device In HTML, images are defined with the <img> tag and does not have a closing tag Image Syntax <img src=“zayed.jpg" alt=“shk zayed" style="width:128 ;height:128"> <img src=“zayed.jpg" alt=“shk zayed" width = “128” height=”128">

2. Adding image from the Device Image Syntax <img src=“foldername/imagename.jpg” > <img src=“images/zayed.jpg" alt=“shk zayed" style="width:128 ;height:128"> <img src=“images/zayed.jpg" alt=“shk zayed" width = “128” height=”128">

3. Adding image from a link Image Syntax <img src="https://www.moe.gov.ae/Ar/MediaCenter/News/PublishingImages/ zayed.JPG" alt="shaikh zayed.com" width = "300" height="250” >

Open NotePad++ and follow step by step to accomplish the activity. Practical Open NotePad++ and follow step by step to accomplish the activity.

Task Sheet Open NotePad++ - and write main html tags head & body Completed Not Completed 1 Open NotePad++ - and write main html tags head & body 2 Save your file as “Lesson7-Name.html “ 3 Add a Title for your page ( Zayed in our heart ) 4 Add h1 heading “Year 2018 – Year of Zayed “ 5 Add 2 breaks after the above heading 6 Add a comment “ image of zayed” after the breakes 7 Add an image from your folder “zayed2018.jpg”

2. Links

Links To link two or more HTML documents together. 1. Hyper Links You can click on a link and jump to another document. Syntax <a href="https://www.w3schools.com/html/"> Visit our HTML tutorial </a>

Links 2. Links to another page in the same html folder Syntax <a href=“page2.html"> Next Page </a>

Task Sheet No Task Completed Not Completed 8 Add a link to “ https://government.ae/en/ “ Government of UAE. 9 Add a link to another page in your folder.

3. Colours

Adding Colour CSS – Cascading Style Sheet : modern programming language used to format the look of the web pages. Syntax Refer to student book P-106-107

Task Sheet Add a new heading h2 to your page colored maroon as “ No Task Completed Not Completed 10 Add a new heading h2 to your page colored maroon as “ Sheikh Zayed bin Sultan Al Nahyan, the Founding President of the UAE “ 11 Add a blue paragraph copied from the government page as advised by your teacher.

4. Adding Tables

Table Main Structure <table> </table> Make table <th></th> Table header <tr> </tr> Table Row <td></td> Table Data

Output of our table Border Line <table> <table border= "1">

Add a border to your table <table> </table> Make table <th></th> Table header <tr> </tr> Table Row <td></td> Table Data

Task Sheet Create a table using the <table > tag No Task Completed Not Completed 12 Create a table using the <table > tag 13 Add the following table headings and raws 14 Add an image in a new column as below

Evaluate your Understanding