HTML (Hypertext Markup Language )

Slides:

Advertisements

Similar presentations

/k/k 1212 Cascading Style Sheets Part one Marko Boon

Advertisements

1 تقنيات الانترنت عال457 HTML. 2 HTML  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web. HTML is a text formatting.

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

End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science

HTML Tags. Bolding Text Or Italics Text Or

Tutorial 3 – Designing a Web Page Working with Color & Graphics Mrs. Wilson.

Images & Tables. Three graphic file types are supported by today's browsers: GIF - Graphic Interchange Format JPEG - Joint Photographic Experts Group.

Computer Science 1611 Internet & Web Creating Webpages with Style Hypertext and the HTML Markup Language (continued)

RGB color model Skills: none IT concepts: combining red, green and blue light to generate colors This work is licensed under a Creative Commons Attribution-Noncommercial-

Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.

Contains 16,777,216 Colors. My Car is red My Car is red How do I add colors to my web page? Notepad Browser Works with the “Standard” colors: Red, Green,

Colour & Image in HTML Wah Yan College (Hong Kong) Mr. Li C.P.

Why HTML. View Code This is my home page. My name is Ali. I’m studying Educational Technology. Save as Text.

1 HTML/CSS Tutorial. 2 Definitions WWW -- a software infrastructure layered on top of the Internet HTTP -- HyperText Transport Protocol, layered on top.

CS105 Introduction to Computer Concepts HTML

Colors, Images, & Image Maps. Working with Color Colors are defined in terms of RGB Triplet –Red, Green, Blue –0 to 255 in intensity –(00, 00, 00) is.

Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.

Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by, Stephanie Ludi, Rochester Institute of Technology—NY Basic Web Page Construction Graphics.

HTML. The WWW is built of web pages, those pages are created with HyperText Markup Language (HTML) HTML is not a programming language but a markup (formatting)

1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.

Unit 1 — HTML BASICS Lesson 2 — HTML Organization Techniques.

Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15.

DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.

More Basic XHTML Module 2: XHTML Basics LESSON 2.

Department of Information Technology Chapter 8 - Creating Hypertext links Lecturer: Ms Melinda Chung.

Web111a_chapt03.ppt HTM: Section 3 Colors Selecting Colors Methods Color names Color values Color Names 16 Basic Color Names HTML 3.05, Figure 3-2 Extended.

 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.

Web Design I Spring 2009 Kevin Cole Gallaudet University

CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.

Chapter 4 BIE1313/BPROG1203 | Web design Prepared by Mohamed Abdulkarim / Mike Ng Ah Ngan.

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”

Georgia Institute of Technology Making Text for the Web Barb Ericson Georgia Institute of Technology March 2006.

TABLES 1. In this chapter you will learn that tables have many uses in HTML. Objectives: Upon completing this section, you should be able to: 1. Insert.

Basic HTML Hyper text markup Language. Lesson Overview  In this lesson, you will learn to:  Images  Colors.

Internet Applications Development Lecture 4 L. Obead Alhadreti.

HTML. Adding Background Color The bgcolor attribute lets you change the background color of the Web page. Located in the body tag See common Web Page.

The Teacher Computing HTML HyperText Markup Language.

HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.

Why HTML. This is my home page. My name is Ali. I’m studying Technology Education.

HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …

REEM ALMOTIRI Information Technology Department Majmaah University.

Basic HTML Hyper text markup Language. Lesson Overview  In this lesson, you will learn to:  Images  Colors.

1 HTML. 2 Full forms WWW – world Wide Web HTTP – Hyper Text Transfer Protocol HTML – Hyper Text Markup Language.

Why HTML. This is my home page. My name is Ali. I’m studying Technology Education.

In this session, you will learn to:

What is HTML? Acronym for: HyperText Markup Language

Hyper text markup Language

Even More HTML Richard Fisher.

Introduction to HTML.

HTML <table> tag syntax: <table> </table>

Linking With Graphics INP150: Basic HTML March 25, 2002.

GRAPHICS(IMAGES) Explained By: Sarbjit Kaur.

HTML Images CS 1150 Spring 2017.

COMPUTING FUNDAMENTALS

HTML (HyperText Markup Language)

Font tag and its attributes

Introduction to HTML II

Hyper text markup Language

Web Design and Development

HTML Images CS 1150 Fall 2016.

Attribute of heading, <p> and <hr> tag

Lesson 2 HTML Organization Techniques.

Attribute of heading, <p> and <hr> tag

Lesson 7 Graphics.

Johan Ng and Muhammad Hazzry

Attribute of heading, <p> and <hr> tag

Presentation transcript:

HTML (Hypertext Markup Language )

IMAGES Formats of the files for images There are two main formats for the images’ files: gif and jpeg (jpg) Showing the image in HTML-page <img src=“name of the image"> Example : <img src="roses.gif">

Disposal the image on the page Centering the image <div align="center"> <img src="roses.gif" /> </div> Effect:

Attributes of the image tag Attributes width and height assign respectively width and height of the image in pixels. The attribute alt assign alternative name of the image Combining the above attributes it follows: <img src="roses.gif" width="150" height="112" alt="Image roses" />

The attribute border assign a border around the image in pixels example: <img src=" roses.gif" border="8" /> The effect in the browser is:

Alignment of an image towards text Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. <img src=" roses.gif" width="150" height="112" alt="Image roses" align="left" /> Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст.

align = right Other values of attribute align align="top" align="middle" align="bottom" Attributes hspace and vspace <img src="roses.gif" width="150" height="112" alt="Image roses" align="left" vspace="10" hspace="80" />

Примерен текст. Примерен текст. Примерен текст. Примерен текст Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст. Примерен текст.

Using image for hyperlink <a href="http://www.dir.bg"><img src="roses.gif" width="150" height="112" alt="Image roses"></a> Removing the border around the image <a href="http://www. dir.bg " target="_blank"><img src=“roses.gif" width="150" height="112" alt="Image roses" border="0"></a>

Background of the text and page Colors in HTML Background of the text and page <font color="blue">This is blue text</font> <body bgcolor="yellow"> (Assign yellow color of the background) Using hexadecimal numerical system In HTML colors are given using 16 code 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, A, B, C, D, E, F

Browsers shows the colors combining different values of 3 main colors: Red, Green and Blue. This is so called RGB standard. Each color is coded by values from 00 to FF (255) color Decimal code Hexadecimal code HTML-code white R:255, G:255, B:255 R:FF, G:FF, B:FF #FFFFFF black R:0, G:0, B:0 R:00, G:00, B:00 #000000 The rest colors are some combination of these values.

Assigning black color of the text: <font color="#000000"> black color of the text </font> Assigning white color of the page background and black color of the text in BODY tag is : <body bgcolor="#ffffff" text="#000000"> Codes of some basic colors and their English terms: Color 16-code RGB code English term #000000 R:0, G:0, B:0 black #ffffff R:255, G:255, B:255 white #ffff00 R:255, G:255, B:0 yellow #ff0000 R:255, G:0, B:0 red #00ff00 R:0, G:255, B:0 green #0000ff R:0, G:0, B:255 blue