HTML Basics Customizing your site using the basics 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

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
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.
HTML popo.
Introduction to HTML & CSS
Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.
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.
INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2013 UMSL Introduction to Web Page Design.
HTML: HyperText Markup Language Hello World Welcome to the world!
WeB application development
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.
HTML Introduction HTML
Web Design is a class created to nurture the minds of high school techies, and introduce those without prior knowledge to the field.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Chapter 14 Introduction to HTML
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
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.
HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.
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.
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.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
Amber Annett David Bell October 13 th, What will happen What is this business about personal web pages? Designated location of your own web page.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
1 Essential HTML coding By Fadi Safieddine (Week 2)
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.
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'
HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML.
Just Enough HTML How to Create Basic HTML Documents.
Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.
Basic HTML PowerPoint How Hyper Text Markup Language Works.
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
HTML: Hyptertext Markup Language Doman’s Sections.
Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
Getting Started with HTML. HTML  Hyper Text Markup Language  HTML isn’t a program language, its known as a markup language  A Markup language has tags.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
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.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
Creating Web Pages with Links, Images, and Embedded Style Sheets
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.
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.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
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.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
Introduction to HTML.
HTML Basics.
AN INTRODUCTORY LESSON TO MAKING A SIMPLE WEB PAGE By: RC Emily Solis
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Presentation transcript:

HTML Basics Customizing your site using the basics of HTML

What is HTML? HTML (Hyper Text Markup Language) is the building block of all websites. HTML forms the skeleton of a webpage, and is used along with CSS (Cascading Style Sheets) to create the structure and design of websites. HTML uses tags to define all of the different elements of a page, such as headings, paragraphs, images, and links.

HTML Tag Format Most HTML tags have opening and closing tags that wrap around their content, and look like this: This is a paragraph of text. It is wrapped by opening and closing paragraph tags. Some HTML tags are self-closing, and look like this: (This tag creates a line break.)

How is HTML Written and Rendered? HTML can be created using any text editing software, such as Notepad (Windows) or TextEdit (Mac). Once HTML code has been written, and the file has been saved with a.html extension, any web browser (Internet Explorer, Firefox, Chrome, Safari, etc.) can render it.

Lets build a web page! Open Notepad First, well add tags to define the beginning and ending of our HTML document:

Lets build a web page! Next, well add tags to define the head of our page. Content in the head doesnt necessarily appear on the page, but it provides information to the web browser:

Lets build a web page! Inside the head tag, we add a title, which is displayed in the browser window or tab: This is the title of my page

Lets build a web page! Next, we need to add our body tags, which define the content that will show up in the body of the page: This is the title of my page. This is the content of my page. So far, its only text. Weve built a web page! But, its not very interesting, is it?

Formatting Text First, lets see how to format our text. First, well put each sentence of our text inside paragraph tags, so that the browser will render them as paragraphs: This is the content of my page. So far, its only text. (If we didnt wrap our content in tags, or separate it with tags, there would be no breaks between one line and the next – everything on the page would run together.)

Formatting Text Next, lets add some formatting to our text. We can change font styles using HTML. (Other text formatting, such as colors, fonts, and size are changed with CSS.) or = bold text or = italic text

Formatting Text Lets wrap some of our text with tags to change the font styles: Heading 1 This is the content of my page. So far, it's only text.

Formatting Text We can also use predefined heading tags to format the headings on our page: Heading 1 This is the content of my page. So far, its only text. There are six heading tags: h1, h2, h3, h4, h5, h6 Heading tags run from largest to smallest, meaning that h1 is very large, and h6 is very small Heading tags are useful for search engine optimization

Adding Images Images can be a great way to add color and visual interest to pages. The tag is used to insert images; this tag requires the use of attributes. src=image url – defines the location of the image file, so the browser knows where to find the image. alt=image description – a brief description or title for the image

Adding Images Lets add an image to our site: Heading 1 This is the content of my page. So far, it's only text.

Adding Images We can make some changes to our image by adding additional attributes: width=image width in pixels or percentage height=image height in pixels or percentage Be careful to adjust width and height proportionally to avoid problems with aspect ratio Using percentages is preferable for adaptive/responsive design Width and height dont both need to be included; the browser will calculate the value of the missing attribute

Adding Links Links are one of the most important elements of any webpage. Links can take visitors to pages within our site, external sites, PDF files, Word documents, etc. The tags for a link wrap around the text, image, or other elements that visitors will click on to reach the link. My Page!

Adding Links Linking to a page within our site (a relative link) requires a path to that page relative to the current location: My page! Linking to an external site (absolute link) requires the entire URL of the site we are linking to: Visit Google (The absolute URL for a link can be copied from the address bar of your browser.)

Adding Links Lets insert a link that points to the UVU Web Community site. Since we are linking from a file that is stored locally on our computer, well need to use an absolute link, so the browser knows that were linking to a file that is not stored on our computer: Heading 1 This is the content of my page. So far, it's only text. Web Community

Lists Unordered Lists are useful for displaying bulleted lists of content. The tags wrap the entire list, and tags wrap each list item. Web Community List Item One List Item Two Ordered Lists work the same way, but they generate a numbered list and are wrapped with tags.

Div Tags Web pages are often organized using tags, which divide the page into different sections. This allows for a lot of customization using CSS, because each can be styled and moved separately from others on the page. tags can wrap a single page element, or a group of elements. tags can also be nested tags generally require the use of CSS; they arent very useful without it.

A final note…CSS Styles, IDs, and Classes HTML tags can be formatted using the style attribute and CSS styles: This text is blue and centered on the page. However, the preferable method for CSS styling is using external style sheets, along with IDs and classes to define styles and formatting – but thats a topic for another training session.