HTML Web Programming.

Slides:



Advertisements
Similar presentations
Farhan Nisar University of Peshawar
Advertisements

Table, List, Blocks, Inline Style
HTML popo.
Introduction to HTML & CSS
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
HTML: HyperText Markup Language Hello World Welcome to the world!
WeB application development
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
HTML – A Brief introduction Title of page This is my first homepage. This text is bold  The first tag in your HTML document is. This tag tells your browser.
Images, Tables, lists, blocks, layout, forms, iframes
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
MR.Mohammed Sharaf al Shareef
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
HTML 2. What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file must have an htm or html file extension  With newer software it.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.
HTML. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language.
Headings, Paragraphs, Formatting, Links, Head, CSS, Images
Ahmed Mumtaz Mustehsan
DAT602 Database Application Development Lecture 14 HTML.
HTML HyperText Markup Language Constantly evolving - extra facilities being added regularly Java applets and JavaScript used to increase functionality.
ACM 511 HTML Week -1 ACM 511 Course Notes. Books ACM 511 Course Notes.
Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
Understanding HTML Code
HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.
HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
1 HTML محمد احمدی نیا 2 Of 43 What is HTML?  HTML stands for Hyper Text Markup Language  HTML is not a programming language, it.
CHAPTER 1 HTML & HTML5 I อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Web Design and Development for Business Lecture 3 Hyper Text Markup Language (HTML)
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
HTML: Hyptertext Markup Language Doman’s Sections.
Introduction HTML (Hypertext Markup Language) is used to create document on the World Wide Web. HTML is not a programming language, it is a markup language.
Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
LEARNING HTML PowerPoint #1 Cyrus Saadat, Webmaster.
HTML HyperText Markup Language ©Richard L. Goldman July 15, 2003.
HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.
CSE 409 – Advanced Internet Technology 1 DISCUSSION OF BASIC HTML TAGS.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Introduction 1 Basics syntax, tags of HTML 2 Lists 3 Tables 4 Div 5 HTML Forms 6.
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.
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 is a markup.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
CHAPTER TWO HTML TAGS. 1.Basic HTML Tags 1.1 HTML: Hypertext Markup Language  HTML stands for Hypertext Markup Language.  It is the markup language.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
objectives Learning WEB TECHNOLOGIES. Understanding Salient features of WEB TECHNOLOGIES. Designing of WEB PAGES on your own. Development of WEB APPLICATIONS.
HTML for web designing short course. What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file must have an htm or html file extension.
HTML AN INTRODUCTION TO WEB PAGE PROGRAMMING. INTRODUCTION TO HTML With HTML you can create your own Web site. HTML stands for Hyper Text Markup Language.
HTML Tables Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). td stands.
Elements of HTML Web Design – Sec 3-2
Basic XHTML Tables XHTML tables—a frequently used feature that organizes data into rows and columns. Tables are defined with the table element. Table.
Introduction to XHTML.
Elements of HTML Web Design – Sec 3-2
Computers and Scientific Thinking David Reed, Creighton University
1 Introduction to XHTML.
Html.
Introduction to HTML.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

HTML Web Programming

HTML “Hypertext Markup Language” Method of describing the format of documents Documents are displayed on web browser HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages

Purpose of Web browser is to read HTML document and to display them as web pages Browser does not display the HTML tags, but uses the tags to interpret the content of the page

HTML Tags “<tagname>content</tagname>” HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags “<tagname>content</tagname>”

HTML Elements "HTML tags" and "HTML elements" are often used to describe the same thing An HTML element is everything between the start tag and the end tag, including the tags

Web page consists of two parts head body Head contains information about the page Body contain material that is seen when page is viewed head and body  tags, are located inside what can  be called the "ultimate container tags“ <html> </html>

Examples <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"

HTML Links HTML links are defined with the <a> tag. Example <a href="http://www.w3schools.com">This is a link</a> Note: The link address is specified in the href attribute.

HTML Images HTML images are defined with the <img> tag. Example <img src=“1.jpg" width="104" height="142"> Note: The filename and the size of the image are provided as attributes.

HTML Line Breaks Use the <br> tag if you want a line break (a new line) without starting a new paragraph: Example <p>This is<br>a para<br>graph with line breaks</p>

HTML Text Formatting Tags <b>Defines bold text <em>Defines emphasized text  <i>Defines a part of text in an alternate voice or mood <small>Defines smaller text <strong>Defines important text <sub>Defines subscripted text <sup>Defines superscripted text <ins>Defines inserted text <del>Defines deleted text

Example <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>

Examples <html> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> </body> </html>

<abbr>Defines an abbreviation or acronym <html> <body> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p> <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p> </body> </html>

Formatting tags Text direction How to change the text direction. <bdo> Quotations How to handle long and short quotations. <blockquote>,<q> Deleted and inserted text How to mark deleted and inserted text. <ins>,<del>

HTML Links An image as a link How to use an image as a link. Link to a location on the same page How to link to a bookmark. Create a mailto link How to link to a mail message (will only work if you have mail installed). Create a mailto link 2 Another mailto link.

HTML <a> target Attribute The target attribute specifies where to open the linked document. <a target="_blank|_self|_parent|_top|framename"> Attribute Values _blank Opens the linked document in a new window or tab _self Opens the linked document in the same frame as it was clicked (this is default) _parent Opens the linked document in the parent frame _top Opens the linked document in the full body of the window framename Opens the linked document in a named frame

The HTML <head> Element The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

The HTML <title> Element The <title> tag defines the title of the document. The <title> element is required in all HTML documents. defines a title in the browser toolbar provides a title for the page when it is added to favourites displays a title for the page in search-engine results

The HTML <base> Element The <base> tag specifies the base URL/target for all relative URLs in a page Eg: <head> <base href="http://www.w3schools.com/images/" target="_blank"> </head>

The HTML <link> Element The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets: Eg: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

The HTML <style> Element The <style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser: Eg: <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>

The HTML <meta> Element Metadata is data (information) about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The HTML <meta> Element The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. <meta> tags always goes inside the <head> element. The HTML <script> Element The <script> tag is used to define a client-side script, such as a JavaScript.

Styling HTML with CSS CSS was introduced to provide a better way to style HTML elements. CSS can be added to HTML in the following ways: Inline - using the style attribute in HTML elements Internal - using the <style> element in the <head> section External - using an external CSS file

HTML Style Example - Background Color The background-color property defines the background color for an element: Example <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html>

Font, Color and Size <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font- size:20px;">A paragraph.</p> </body> </html>

HTML Style Example - Text Alignment he text-align property specifies the horizontal alignment of text in an element. Example <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>

<noscript> tag The <noscript> tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support script. The <noscript> element can be used in both <head> and <body>. The content inside the <noscript> element will be displayed if scripts are not supported, or are disabled in the user’s browser.

Float an image to left or right Let an image float to the left and to the right <html> <body> <p> <img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text. </p> <img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> A paragraph with an image. The image will float to the right of this text. <p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.</p> </body> </html>

Aligning images <html> <body> <h4>Image with default alignment (align="bottom"):</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="32" height="32"> This is some text.</p> <h4>Image with align="middle":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"> This is some text.</p> <h4>Image with align="top":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32"> This is some text.</p> <p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p> </body> </html>

Create an image map How to create an image map, with clickable regions. Each region is a hyperlink. <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.html"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.html"> </map> </body> </html>

HTML Tables Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table Example <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

HTML Table Headers Header information in a table are defined with the <th> tag. All major browsers display the text in the <th> element as bold and centered. <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

HTML Table Table with a caption How to add a caption to a table. Use <caption> Table cells that span more than one row/column How to define table cells that span more than one row or one column. Tags inside a table How to display elements inside other elements. Cell padding How to use cell padding to create more white space between the cell content and its borders. Cell spacing How to use cell spacing to increase the distance between the cells.

HTML Table The <colgroup> tag specifies a group of one or more columns in a table for formatting. The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. The <thead> tag is used to group header content in an HTML table. The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer).

HTML Lists The most common HTML lists are ordered and unordered lists HTML Unordered Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles).

HTML Lists HTML Ordered Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers.

HTML Lists HTML Description Lists A description list is a list of terms/names, with a description of each term/name. The <dl> tag defines a description list. The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> Nested List

The HTML <div> Element The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS. The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.

The HTML <span> Element The <span> tag is used to group inline-elements in a document. The <span> tag provides no visual change by itself. The <span> tag provides a way to add a hook to a part of a text or a part of a document.

HTML Layouts - Using <div> Elements The div element is a block level element used for grouping HTML elements.

HTML Forms HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. <form> . input elements . </form>

HTML Forms Text Fields <input type="text"> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>

HTML Forms Password Field <input type="password"> defines a password field: <form> Password: <input type="password" name="pwd"> </form>

HTML Forms Radio Buttons <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>

HTML Forms Checkboxes <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car  </form>

HTML Forms Submit Button <input type="submit"> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: <form name="input" action=“C:/Users/user/Desktop/HTML code Egs/1.html" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

HTML Forms Fieldset & Legend tags The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements. The <legend> tag defines a caption for the <fieldset> element.

HTML Iframes An iframe is used to display a web page within a web page. Syntax for adding an iframe: <iframe src="URL"></iframe> <iframe src="C:/Users/user/Desktop/HTML code Egs/sun.html" name="iframe_a"></iframe> <p><a href=" C:/Users/user/Desktop/HTML code Egs/1.html"target="iframe_a">Sample</a></p>

The HTML <script> Tag The <script> tag is used to define a client-side script, such as a JavaScript. The <script> element either contains scripting statements or it points to an external script file through the src attribute. <script> document.write("Hello World!") </script>