More HTML Tags CS 1150 Spring 2017.

Slides:



Advertisements
Similar presentations
Introduction to HTML
Advertisements

HTML popo.
HTML Overview - Text Markups. Before We Begin Make a copy of your HTML file you created in the previous lesson Make a copy of your HTML file you created.
C HAPTER – 3 I NTRODUCTION TO H TML By :- Pinkesh H. Patel.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
HTML FORMATTING. CONTENTS HTML Formatting Formatting Example Formatting Example Output Summary Exercise.
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.
HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.
Define html document byusing Example : Title of the document The content of the document......
Headings, Paragraphs, Formatting, Links, Head, CSS, Images
HTML Essentials Markup ( Part I ). Why Markup ? Markup gives meaning and structure to your web page Creates a relationship between the elements.
Programming I 2 nd lecture. Block-level and inline elements BlockInline block-level elements generally can contain text, data, inline elements, or other.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
ACM 511 HTML Week -1 ACM 511 Course Notes. Books ACM 511 Course Notes.
CSCI 1101 Intro to Computers
Just Enough HTML How to Create Basic HTML Documents.
1 What is HTML? Standardized codes Web pages SGML Descriptive markup Tags.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
HTML: Hyptertext Markup Language Doman’s Sections.
Learning HTML involves... Learning how these elements are used Learning a list of elements.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
Web Design. How do web pages work? Webpages are written in a code called HTML. Programs like Internet Explorer read the code, and then show it as a web.
CS 111 – Oct. 4 Web design –HTML –Javascript Commitment: –This week, read sections 4.3 – 4.5.
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.
Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.
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 tags and attributes By: Dennis Champagne. List of tags.
Text Building a Website Lesson 3. Headings,,,,, Headings,,,,, HTML has 6 levels of headings,,,,,,,,,, is used for main headings is used for main headings.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
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.
Hypertext Markup Language.  Developed by Tim Berners-Lee in 1990  Stands for HyperText Markup Languange  A format that tells a computer how to display.
Basic Webpage Design Formatting tags.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
Week-11 (Lecture-1) Introduction to HTML programming: A web based markup language for web. Ex.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
HTML Introduction. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements.
HTML CS 4640 Programming Languages for Web Applications
HTML Basics.
HTML TEXT.
Web Development & Design Foundations with HTML5 8th Edition
Learning HTML involves... Learning a list of elements Learning how these elements are used Explain: Learning HTML means learning all of the elements.
More HTML Tags CS 1150 Fall 2016.
Elements of HTML Web Design – Sec 3-2
Elements of HTML Web Design – Sec 3-2
Creating a Web Page.
Web Development & Design Foundations with HTML5 7th Edition
HTML5 – Heading, Paragraph
Uppingham Community College
What is HTML? Standardized codes Web pages SGML Descriptive markup
Elements of HTML Web Design – Sec 3-2
Introduction to HTML.
Internet & Web Engineering Course Code:CS-228 Credit Hours (3+1) Lab 1 Introduction to Markup Language HTML Instructor: Muhammad Zeeshan Haider.
Tag Basics.
HTML.
WEBSITE DESIGN Chp 1
HTML Intro.
(HTML tags can be referred from
Web Design and Development
Client-Side Internet and Web Programming
Introduction to HTML- Basics
HTML Formatting Text.
Programming for webpages
Html.
HyperText Markup Language
WJEC GCSE Computer Science
Getting Started with Marking Up Page Content
HTML CS 4640 Programming Languages for Web Applications
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

More HTML Tags CS 1150 Spring 2017

Formatting Elements <b> - Bold text <i> - Italic text <mark> - Marked text <small> - Small text <sub> - Subscript text <sup> - Superscript text

Semantic Markup There are some text elements that are not intended to affect the structure of your webpages, but they do add extra information to the pages – they are known as semantic markup For example, the <em> element is shown in italics in most browsers, but you should not use it to change the way that your text looks; its purpose is to describe the content of your webpages more accurately Semantic markup information is useful to screen readers or search engines

HTML <b> and <strong> Elements <b> is a formatting element that bolds the text, while <strong> is a semantic element <b> This text is bold </b> <strong> This text is strong </strong> Browsers display <strong> as <b>. However, there is a difference in the meaning of these tags: <b> defines bold, but <strong> means that the text is “important”

HTML <i> and <em> Elements <i> is a formatting element that italicizes the text, while <em> is a semantic element <i> This text is italic </i> <strong> This text is emphasized</strong> Browsers display <em> as <i>. However, there is a difference in the meaning of these tags: <i> defines italic, but <em> means that the text is “emphasized”

HTML <small> Elements The HTML <small> element defines smaller text <small> is a formatting element <small> This text is small</small>

HTML <marked> Elements The HTML <marked> element defines marked or highlighted text <marked> is a formatting element <marked> This text is marked</marked>

HTML <sub> Elements The HTML <sub> element defines subscripted text <sub> is a formatting element <sub> This text is subscripted</sub>

HTML <sup> Elements The HTML <sup> element defines superscripted text <sub> is a formatting element <sup> This text is superscripted</sup>

HTML <del> Elements The HTML <del> element defines deleted or strike-through text <del> is a semantic element <del> This text is deleted</del>

HTML <ins> Elements The HTML <ins> element defines inserted or underlined text <ins> is a semantic element <ins> This text is inserted</ins>

Other Semantic Elements In addition to <strong> and <em>, there are other semantic elements that describe extra information about the text <blockquote> indicates to the browser that there is a long quote present <q> indicates a shorter quote <abbr> indicates an abbreviation or acronym <cite> indicates a reference to a piece of work like a book or film <dfn> indicates a the defining instance of a new term

White Space Collapsing When the browser comes across two or more spaces next to each other, it only displays one space Similarly, if it comes across a line break, it treats that as a single space too This is known as white space collapsing

Line Breaks If you want to add a line break inside the middle of a paragraph, you can use the line break tag <br /> The line break element is known as an empty element – it does not have an opening and closing tag, but instead has only one tag <pThe Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>

Horizontal Rules To create a break between themes, such as a change of topic in a book or a new scene in a play, you can add a horizontal rule between sections using the <hr /> tag The horizontal rule element is known as an empty element – it does not have an opening and closing tag, but instead has only one tag <p>Section One<hr />Section Two</p>

Helpful Links http://www.w3schools.com/html/html_formatting.asp Example files for formatting and semantic elements: https://www.cs.mtsu.edu/~crn2k/public/courses/1150/HTMLExamples/formatting_semantic_elements .html https://www.cs.mtsu.edu/~crn2k/public/courses/1150/HTMLExamples/more_semantic_elements.html Example file for white space collapsing https://www.cs.mtsu.edu/~crn2k/public/courses/1150/HTMLExamples/spaces.html Example file for line breaks and horizontal rules https://www.cs.mtsu.edu/~crn2k/public/courses/1150/HTMLExamples/breaks.html