Design your first website using HTML

Design your first Website

HTML & CSS

Bunty Jain, IT Training, SAP, seekbuntyjain@gmail.com Delhi India.

Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.

Website Designing

An Overview

Web Components

Clients and ServersInternet Service ProvidersWeb Site Hosting ServicesDomains Names

With HTML you can create your own Web site

HTML is easy to learn - You will enjoy it.

HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language

A markup language is a set of markup tags

HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

HTML tags are keywords 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

HTML Tags

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body> </html>

HTML Format

Editing HTMLHTML can be written and edited using

many different editors like Dreamweaver and Visual Studio.

However, in this tutorial we use a plain text editor (like Notepad) to edit HTML.

.HTM or .HTML File Extension?

When you save an HTML file, you can use either the .htm or the .html

file extension. There is no difference, it is entirely up to you.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

Example <h1>This is a heading</h1>

<h2>This is a heading</h2> <h3>This is a heading</h3>

HTML ParagraphsParagraphs are defined with the <p> tag.

Example

<p>This is a paragraph</p> <p>This is another paragraph</p>

HTML Links

HTML links are defined with the <a> tag.

Example <a

href="http://www.subjectelement.com">This is a link</a>

HTML Images

HTML images are defined with the <img> tag.

Example

Nested HTML Elements<html>

<body> <p>This is my first paragraph.</p>

</body>

</html>

The <body> element<body>

<p>This is my first paragraph.</p> </body>

The <body> element defines the body of the HTML document.

The <html> element:<html>

<body> <p>This is my first paragraph.</p>

</body>

</html>

The <html> element defines the whole HTML document.

Don't Forget the End Tag

Some HTML elements might display correctly even if you forget the end tag:

<p>This is a paragraph

The example above works in most browsers, because the closing tag is considered optional.

Never rely on this.

HTML Tip: Use Lowercase Tags

HTML tags are not case sensitive:

<P> means the same as <p>

HTML AttributesAttributes provide additional information about an

element

Attributes come in name/value pairs like: name="value“

Example <a href="http://www.subjectselement.com">This is a

link</a>

HTML Horizontal LinesThe <hr /> tag creates a horizontal line in an

HTML page.

<p>This is a paragraph</p> <hr />

<p>This is a paragraph</p>

HTML CommentsComments can be inserted into the HTML code to make it more readable and understandable.

Comments are written like this:

HTML Tip - How to View HTML Source

Have you ever seen a Web page and wondered

"Hey! How did they do that?"

To find out, right-click in the page and select "View

Source" (IE)

HTML Line BreaksUse 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

This text is bold

This text is big

This text is italic

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.

The HTML <font> Tag<p>

<font size="5" face="arial" color="red"> This paragraph is in Arial, size 5, and in red text color.

</font> </p>

This paragraph is in Arial, size 5, and in red text color. </font>

HTML Tables<table border="1">

</tr> <tr>

</tr> </table>

HTML Table Headers<table border="1">

<tr> <th>Header 1</th> <th>Header 2</th>

</tr> <tr>

</tr> </table>

HTML Lists

<ul> <li>Coffee</li>

<li>Coffee</li> <li>Milk</li>

HTML Layouts - Using Tables

The simplest way of creating layouts is by using the HTML <table> tag.

The HTML head Element

The following tags can be added to the head section

<title>, <base>, <link>,

<meta>, <script>,

and <style>

We can move to learn CSS

Thanks

Design your first website using HTML

Technology

Transcript of Design your first website using HTML

Introduction to HTML. HTML Hyper Text Markup Language Page Title My First Heading My first paragraph. Page Title My First Heading My first paragraph.

Creating a Website Using CSS€¦ · CREATING A WEBSITE USING CSS ... HTML –Hypertext Markup Language CSS –Cascading Style Sheet. HTML VS. CSS HTML is used to define the structure

Make a Website - Amazon S3 · Make a Website: Site Structure What are HTML and CSS? All websites use HTML and CSS! • HTML stands for Hyper Text Markup Language. It is used to give

Website Design · 2018. 11. 27. · What is Web Design? It’s a combo of CSS and HTML, used to create and decorate website pages. Why should you learn HTML and CSS? Html and Css

HTML and CSS Style - Website Designing Basics

Learn How to Make a Website Using HTML

HTML - Coding your First Website Handout

Basic Website tutorial - Moo ICT – Project Based Tutorialstitle>Title of page this is

DigiGirlz Tech Camp - Creating Your Own Website Using HTML

Webline Custom HTML Website Design Portfolio March - June

Creating Webpage Using HTML. About HTML HTML is the Original publishing language of the World Wide Web. All other website building platforms are based.

How to Create an Umbraco Website from Flat HTML Files.pdf

Website HTML

Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example

HTML Advanced: HTML 5. Introduction to HTML 5 These slides are based on source material found at the w3schools.com website.

HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Developing the website using HTML, CSS and JavaScript ...

9 Best High Quality HTML Website Templates

Introduction to HTML5. History of HTML HTML first published – Tim Berners-Lee 1991 2012 2002 - 2009 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 2.0.

Building a Website from Planning to Photoshop Mockup to HTML/CSS