Elements of HTML Web Design – Sec 3-2

Slides:



Advertisements
Similar presentations
HTML popo.
Advertisements

CS134 Web Design & Development Attributes, Lists, Tables, Links, and Images Mehmud Abliz.
HTML and XHTML Controlling the Display Of Web Content.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
Constructing Table by Using HTML
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Introduction to HTML II Shih-Heng Chin. Preface Structure of a HTML File Elements used frequently Tables.
HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.
INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.
CS105 Introduction to Computer Concepts HTML
Chapter 2 HTML (Hypertext Markup Language) Part I.
HTML (HyperText Markup Language)
Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.
Getting Started with HTML Please use speaker notes for additional information!
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
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.
HTML— More Tags, Formatting, and Lists. Formatting Tags  Bold  Italics  Underline  Big text  Small text  Subscript (H 2 O)  Superscript (10 3 )
1 Web Application Programming Presented by: Mehwish Shafiq.
Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.
HTML HyperText Markup Language ©Richard L. Goldman July 15, 2003.
Week 2: Building a Simple Website IMC 320 Web Publishing Spring 2011.
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.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
1999, COMPUTER SCIENCE, BUU Introduction to HTML Seree Chinodom
©SoftMoore ConsultingSlide 1 Introduction to HTML: Block-Level Elements.
INT222 – Internet Fundamentals
Chapter 4 HTML Tags. HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write.
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.
1 Mansoor Ahmed Bughio. 2 HTML TABLES With HTML you can create tables. Examples Tables This example demonstrates how to create tables in an HTML document.
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.
HTML Tables. 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).
Lesson 5. XHTML Tags, Attributes and Structure XHTML Basic Structure head and body titles Paragraph headings comments Document Presentation Manipulating.
HTML Basics.
Web Development Part 1.
LAB Work 01 MBA 61062: E-Commerce
Marking Up with XHTML Tags describe how a web page should look
Semester - Review.
Unit 3 - Review.
Yourfriendmanoj.wordpress.com Fb/yourfriendmanoj
Introduction to basic HTML
Survey of Computer Science CSCI 110, Spring 2011 Lecture 23 HTML
Working with Tables: Module A: Table Basics
HTML: HyperText Markup Language
>> HTML: Tables.
Elements of HTML Web Design – Sec 3-2
Essential Tags Web Design – Sec 3-3
Programming the Web using XHTML and JavaScript
Chapter 5 Introduction to XHTML: Part 2
Elements of HTML Web Design – Sec 3-2
Web Programming– UFCFB Lecture 5
COMPUTING FUNDAMENTALS
Computers and Scientific Thinking David Reed, Creighton University
Web Design and Development
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
1 Introduction to XHTML.
Introduction to XHTML Cont:.
Html.
Introduction to HTML.
Marking Up with XHTML Tags describe how a web page should look
Basic HTML.
HTML Basics Mr. Fazzalari.
Marking Up with XHTML Tags describe how a web page should look
Johan Ng and Muhammad Hazzry
Marking Up with XHTML Tags describe how a web page should look
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

Elements of HTML Web Design – Sec 3-2 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives The Student will: Will have a basic understanding of the elements of an XHTML tags and their ordering.

HTML Code HTML (hypertext markup language) is the language that is used to create pages for the web. You can view the source for a web page by clicking View -> Source

HMTL Plain text Includes a variety of codes or "tags" that define the structure of the document, and allow documents to include headings, paragraphs, images, links, lists, tables, and other features The emerging trend in web development is to use XHTML. XHTML is a rewrite of HTML as an XML language XHTML is very similar to HTML, but has stricter rules

HTML Tags - Document Structure Opening Tag Closing Tag Description <html> </html> Identifies the document as HTML. <head> </head> Identifies the header section of your document, which is used to provide information about the document for use primarily by search engines and browsers. <title> </title> The title of document. This element must be nested within the head elements. <body> </body> Contains all the visible content of a web page.

HTML Tags - Content (Container) Tags Opening Tag Closing Tag Description <h1> to <h6> </h1>to</h6> Headings. H1 is the main heading, H2 is secondary, etc. <p> </p> New paragraph. <div> or <span> </div> or </span> Serve as a container for content. <em> </em> Gives the contained text emphasis (usually as italics). <strong> </strong> Makes the contained text bold.

HTML Tags - Content (Container) Tags Opening Tag Closing Tag Description <a href = "document location"> </a> Link to another document. <a name = "label"> Link to another section of the same page. <ol> </ol> Makes ordered lists. <ul> </ul> Makes unordered (or bulleted) lists. <li> </li> Marks items in either the ordered or unordered list.

HTML Tags - Empty (Non-Container) Tags Description <br /> Causes a line break. It may be repeated for multiple line breaks. <hr /> Horizontal rule. It creates a line to separate content. <img src ="image location" /> Inserts an image into a web page. <p /> The paragraph tag used in this manner serves as a double line break. It does not contain text. Unlike the <br /> tag it cannot be used multiple times to generate more white space.

HTML Tags - Table Tags Opening Tag Closing Tag Sample Attributes Description <table> </table>   Adds table. border="number" Border for rows & columns. cellpadding Thickness of cell wall. cellspacing Spacing between border and cell contents. bgcolor Background color of cells. <tr> </tr> Table row (start & end). align="left, center, right" Aligns text in row horizontally. align="top, middle, bottom" Aligns text in row vertically.

HTML Tags - Table Tags <th scope="row" > <th scope="col" > Opening Tag Closing Tag Sample Attributes Description <th scope="row" > <th scope="col" > </th>   When creating a table to display data, use this tag to differentiate the first row or column of cells as heading cells for all the other cells in the same column or row. Content will automatically be bold and center aligned. The scope attribute defines which data cells pertain to the heading. <td> </td> Defines data cell. colspan="number" Spans cells across column. rowspan="number" Spans cells across row. align Alignment in cell.

Summary HTML is the language of the web HTML tags control how pages are displayed. Most HTML tags have a beginning and an ending tag

Rest of Today Using the Common HTML tags document, complete Homework 3-2 If your sheet designing your web page is not complete from yesterday, complete it and turn it in