html basic ppt presentation

HTML BASICS Slides Presentation

Click to access all Slides..

This slide presentation shows basics of HTML.

HTML and XHTML are the foundation of all web development. HTML is used as the graphical user interface in client-side programs written in JavaScript. Server-side languages like PHP and Java also receive data from web pages and use HTML as the output mechanism. The emerging Ajax technologies likewise use HTML and XHTML as their visual engine. HTML was once a very loosely-defined language with very little standardization, but as it has become more important, the need for standards has become more apparent. Regardless of whether you choose to write HTML or XHTML, understanding the current standards will help you provide a solid foundation that will simplify all your other web coding. Fortunately HTML and XHTML are actually simpler than they used to be, because much of the functionality has moved to CSS.

Common Elements

Every page (HTML or XHTML shares certain elements in common.) All are essentially plain text files, with the .html extension. HTML files should not be created with a word processor, but in some type of editor that creates plain text. Every page has a large container (HTML or XHTML) and two major subcontainers, the head and the body. The head area contains information useful behind the scenes, such as CSS formatting instructions and JavaScript code. The body contains the part of the page that is visible to the user.

Tags and Attributes

An HTML document is based on the notion of tags. A tag is a piece of text inside angle brackets (<>). Tags typically have a beginning and an end, and usually contain some sort of text inside them. For example, a paragraph is normally denoted like this:

The <p> indicates the beginning of a paragraph. Text is then placed inside the tag, and the end of the paragraph is denoted by an end tag, which is similar to the start tag but with a slash (</p>.) It is common to indent content in a multi-line tag, but it is also legal to place tags on the same line:

Tags are sometimes enhanced by attributes, which are name value pairs that modify the tag. For example, the tag (used to embed an image into a page) usually includes the following attributes:

The src attribute describes where the image file can be found, and the alt attribute describes alternate text that is displayed if the image is unavailable.

Nested tags

Tags can be (and frequently are) nested inside each other. Tags cannot overlap, so <a><b></a></b> is not legal, but <a><b></b></a> is fine.

HTML VS XHTML

HTML has been around for some time. While it has done its job admirably, that job has expanded far more than anybody expected. Early HTML had very limited layout support. Browser manufacturers added many competing standards and web developers came up with clever workarounds, but the result is a lack of standards and frustration for web developers. The latest web standards (XHTML and the emerging HTML 5.0 standard) go back to the original purpose of HTML: to describe the structure of the data only, and leave all formatting to CSS (Please see the DZone CSS Refcard Series). XHTML is nothing more than HTML code conforming to the stricter standards of XML. The same style guidelines are appropriate whether you write in HTML or XHTML (but they tend to be enforced in XHTML):

Most of the requirements of XHTML turn out to be good practice whether you write HTML or XHTML. I recommend using XHTML strict so you can validate your code and know it follows the strictest standards.

XHTML has a number of flavors. The strict type is recommended, as it is the most up-to-date standard which will produce the most predictable results. You can also use a transitional type (which allows deprecated HTML tags) and a frameset type, which allows you to add frames. For most applications, the strict type is preferred.

HTML Template

The following code can be copied and pasted to form the foundation of a basic web page:

The structure of your web pages is critical to the success of programs based on those pages, so use a validating tool to ensure you haven't missed anything

USEFUL OPEN SOURCE TOOLS

Some of the best tools for web development are available through the open source community at no cost at all. Consider these application as part of your HTML toolkit:

PAGE STRUCTURE ELEMENTS

The following elements are part of every web page.

KEY STRUCTURAL ELEMENTS

Most pages contain the following key structural elements:

LISTS AND DATA

Web pages frequently incorporate structured data so HTML includes several useful list and table tag

Standard List Types

HTML supports three primary list types. Ordered lists and unordered lists are the primary list types. By default, ordered lists use numeric identifiers, and unordered lists use bullets.

However, you can use the list-style-type CSS attribute to change the list marker to one of several types.

Lists can be nested inside each other

Definition lists

The special definition list is used for name / value pairs. The definition term (dt) is a word or phrase that is used as the list marker, and the definition data is normally a paragraph:

Use of tables

Tables were used in the past to overcome the page-layout shortcomings of HTML. That use is now deprecated in favor of CSS-based layout. Use tables only as they were intended, to display tabular data.

A table mainly consists of a series of table rows (tr.) Each table row consists of a number of table data (td) elements. The table heading (th) element can be used to indicate a table cell should be marked as a heading.

The rowspan and colspan attributes can be used to make a cell span more than one row or column.

Each row of a table should have the same number of columns, and each column should have the same number of rows. Use of the span attribute may require adjustment to other rows or columns.

LINKS AND IMAGES

Links and images are both used to incorporate external resources into a page. Both are reliant on URIs (Universal Resource Indicators), commonly referred to as URLs or addresses.

<a> (anchor) The anchor tag is used to provide the basic web link:

In this example, http://www.example.com is the site to be visited. The text "link to example.com" will be highlighted as a link.

absolute and relative references

<link>

The link tag is used primarily to pull in external CSS files:

<img>

The img tag is used in to attach an image. Valid formats are .jpg, .png, and .gif. An image should always be accompanied by an alt attribute describing the contents of the image.

Image formatting attributes (height, width, and align) are deprecated in favour of CSS.

SPECIALTY MARKUP

HTML / XHTML includes several specialty tags. These are used to describe special purpose text. They have default styling, but of course the styles can be modified with CSS.

<quote>

The quote tag is intended to display a single line quote:

Quote is an inline tag. If you need a block level quote, use <blockquote>.

<pre>

The <pre> tag is used for pre-formatted text. It is sometimes used for code listings or ASCII art because it preserves carriage returns. Pre-formatted text is usually displayed in a fixed-width font.

<code>

The code format is used to manage pre-formatted text, especially code listings. It is very similar to pre.

<blockquote>

This tag is used to mark multi-line quotes. Frequently it is set off with special fonts and indentation through CSS. It is a block-level tag.

<span>

The span tag is a vanilla inline tag. It has no particular formatting of its own. It is intended to be used with a class or ID when you want to apply style to an inline chunk of code.

The em tag is used for standard emphasis. By default, <em> italicizes text, but you can use CSS to make any other type of emphasis you wish.

<strong>

This tag represents strong emphasis. By default, it is bold, but you can modify the formatting with CSS.

Forms are the standard user input mechanism in HTML / XHTML. You will need another language like JavaScript or PHP to read the contents of the form elements and act upon them.

Form Structure

A number of tags are used to describe the structure of the form. Begin by looking over a basic form:

The <form></form> pair describes the form. In XHTML strict, you must indicate the form's action property. This is typically the server-side program that will read the form. If there is no such program, you can set the action to null ("") The method attribute is used to determine whether the data is sent through the get or post mechanism.

Most form elements are inline tags, and must be encased in a block element. The fieldset is designed exactly for this purpose. Its default appearance draws a box around the form. You can have multiple fieldsets inside a single form.

You can add a legend inside a fieldset. This describes the purpose of the fieldset.

A label is a special inline element that describes a particular field. A label can be paired with an input element by putting that element's ID in the label's for attribute.

The input element is a general purpose inline element. It is meant to be used inside a form, and it is the basis for several types of more specific input. The subtype is indicated by the type attribute. Input elements usually include an id attribute (used for CSS and JavaScript identification) and / or a name attribute (used in server-side programming.) The same element can have both a name and an id.

This element allows a single line of text input:

Passwords display just like textboxes, except rather than showing the text as it is typed, an asterisk appears for each letter. Note that the data is not encoded in any meaningful way. Typing text into a password field is still entirely unsecure.

Radio Button

Radio buttons are used in a group. Only one element of a radio group can be selected at a time. Give all members of a radio group the same name value to indicate they are part of a group.

Attaching a label to a radio button means the user can activate the button by clicking on the corresponding label. For best results, use the selected attribute to force one radio button to be the default.

Checkboxes are much like radio buttons, but they are independent. Like radio buttons, they can be associated with a label.

Hidden fields hold data that is not visible to the user (although it is still visible in the code) It is primarily used to preserve state in server-side programs.

Note that the data is still not protected in any meaningful way.

Buttons are used to signal user input. Buttons can be created through the input tag:

This will create a button with the caption "launch the missiles." When the button is clicked, the page will attempt to run a JavaScript function called "launchMissiles()" Standard buttons are usually used with JavaScript code on the client. The same button can also be created with this alternate format:

This second form is preferred because buttons often require different CSS styles than other input elements. This second form also allows an <img> tag to be placed inside the button, making the image act as the button.

The reset button automatically resets all elements in its form to their default values. It doesn't require any other attributes.

Select / option

Drop-down lists can be created through the select / option mechanism. The select tag creates the overall structure, which is populated by option elements.

The select has an id (for client-side code) or name (for serverside code) identifier. It contains a number of options. Each option has a value which will be returned to the program. The text between <option> and </option> is the value displayed to the user. In some cases (as in this example) the value displayed to the user is not the same as the value used by programs.

Multiple Selections

You can also create a multi-line selection with the select and option tags:

DEPRECATED FORMATTING TAGS

Certain tags common in older forms of HTML are no longer recommended as CSS provides much better alternatives.

The font tag was used to set font color, family (typeface) and size. Numerous CSS attributes replace this capability with much more flexible alternatives. See the CSS refcard for details.

I (italics)

HTML code should indicate the level of emphasis rather than the particular stylistic implications. Italicizing should be done through CSS. The <em> tag represents emphasized text. It produces italic output unless the style is changed to something else. The <i> tag is no longer necessary and is not recommended. Add font-style: italic to the style of any element that should be italicized.

Like italics, boldfacing is considered a style consideration. Use the <strong> tag to denote any text that should be strongly emphasized. By default, this will result in boldfacing the enclosed text. You can add bold emphasis to any style with the font-weight: bold attribute in CSS.

DEPRECATED TECHNIQUES

In addition to the deprecated tags, there are also techniques which were once common in HTML that are no longer recommended.

Frames have been used as a layout mechanism and as a technique for keeping one part of the page static while dynamically loading other parts of the page in separate frames. Use of frames has proven to cause major usability problems. Layout is better handled through CSS techniques, and dynamic page generation is frequently performed through server-side manipulation or AJAX.

Table-based design

Before CSS became widespread, HTML did not have adequate page formatting support. Clever designers used tables to provide an adequate form of page layout. CSS provides a much more flexible and powerful form of layout than tables, and keeps the HTML code largely separated from the styling markup.

HTML ENTITIES

Sometimes you need to display a special character in a web page. HTML has a set of special characters for exactly this purpose. Each of these entities begins with the ampersand(&) followed by a code and a semicolon.

HTML 5 / CSS3 PREVIEW

New technologies are on the horizon. Firefox 3.5 now has support for significant new HTML 5 features, and CSS 3 is not far behind. While the following should still be considered experimental, they are likely to become very important tools in the next few years. Firefox 3.5, Safari 4 (and a few other recent browsers) support the following new features:

Audio and video tags

Finally the browsers have direct support for audio and video without plugin technology. These tags work much like the img tag.

The HTML 5 standard currently supports Ogg Theora video, Ogg Vorbis audio, and wav audio. The Ogg formats are opensource alternatives to proprietary formats, and plenty of free tools convert from more standard video formats to Ogg. The autoplay option causes the element to play automatically. The controls element places controls directly into the page.

The code between the beginning and ending tag will execute if the browser cannot process the audio or video tag. You can place alternate code here for embedding alternate versions (Flash, for example)

The canvas tag offers a region of the page that can be drawn upon (usually with Javascript.) This creates the possibility of real interactive graphics without requiring plugins like Flash.

This is actually a CSS improvement, but it's much needed. It allows you to define a font-face in CSS and include a ttf font file from the server. You can then use this font face in your ordinary CSS and use the downloaded font. If this becomes a standard, we will finally have access to reliable downloadable fonts on the web, which will usher in web typography at long last.

Follow us on Facebook and Twitter for latest update.

• Weekly Trends and Language Statistics

Unsupported browser

This site was designed for modern browsers and tested with Internet Explorer version 10 and later.

It may not look or work correctly on your browser.

How to Create Presentation Slides With HTML and CSS

As I sifted through the various pieces of software that are designed for creating presentation slides, it occurred to me: why learn yet another program, when I can instead use the tools that I'm already familiar with?

We can easily create beautiful and interactive presentations with HTML, CSS, and JavaScript, the three basic web technologies. In this tutorial, we'll use modern HTML5 markup to structure our slides, we'll use CSS to style the slides and add some effects, and we'll use JavaScript to trigger these effects and reorganize the slides based on click events.

This tutorial is perfect for those of you new to HTML5, CSS, and JavaScript, who are looking to learn something new by building. After this you could even learn to build an HTML5 slide deck or a dynamic HTML with JavaScript PPT . The sky is the limit. 

Wondering how to create an HTML slideshow? Here's the final preview of the presentation HTML tutorial slides we're going to build:

Have you checked out HTML tutorial slides? It's a good example of HTML PPT slides for download.

Let's begin.

1. Create the Directory Structure

Before we get started, let's go ahead and create our folder structure; it should be fairly simple. We'll need:

• css/style.css
• js/scripts.js

This is a simple base template. Your files remain blank for the time being. We'll fix that shortly.

2. Create the Starter Markup

Let's begin by creating the base markup for our presentation page. Paste the following snippet into your index.html file.

From the base markup, you can tell that we are importing Font Awesome Icons, our stylesheet ( style.css ), and our JavaScript ( index.js ).

Now we'll add the HTML markup for the actual slides inside the <div> wrapper:

We have seven slides in total, and each slide is composed of the heading section and the content section.

Only one slide will be shown at a time. This functionality is handled by the .show class, which will be implemented later on in our stylesheet. Using JavaScript, later on, we'll dynamically add the .show class to the active slide on the page.

Below the slides, we'll add the markup for our slide's counter and tracker:

Later on, we'll use JavaScript to update the text content as the user navigates through the slides.

Finally, we'll add the slide navigator just below the counter:

This section consists of four buttons responsible for navigating left and right and switching between full-screen mode and small-screen mode. Again, we'll use the class .show to regulate which button appears at a time.

That'll be all for the HTML part. Now, let's move over to styling.

3. Make It Pretty

Our next step takes place within our stylesheet. We'll be focusing on both aesthetics and functionality here. To make each slide translate from left to right, we'll need to target the class .show with a stylesheet to show the element.

Here's the complete stylesheet for our project:

4. Enable Slide Navigation

Whenever we click on the left or right icon, we want the next slide or previous slide to appear. We also want to be able to toggle between full-screen mode and small-screen mode.

Furthermore, we want the slide's counter to display the accurate slide number on every slide. All these features will be enabled with JavaScript.

Inside js/index.js , we'll begin by storing references to the presentation wrapper, the slides, and the active slide:

Next, we'll store references to the slide counter and both of the slide navigators (left and right icons):

Then store references to the whole presentation container and both button icons for going into full screen and small screen mode:

Now that we're done with the references, we'll initialize some variables with default values:

screenStatus represents the screen orientation. 0 represents a full screen mode, and 1 represents a small screen mode.

currentSlideNo represents the current slide number, which as expected is the first slide. totalSlides is initialized with 0, but this will be replaced by the actual number of our slides.

Moving the Presentation to the Next and Previous Slides

Next, we'll add click event listeners to the left button, right button, full screen button, and small screen button:

We bind corresponding functions that will run when the click event is triggered on the corresponding element.

Here are the two functions responsible for changing the slide:

In the function moveToLeftSlide , we basically access the previous sibling element (i.e. the previous slide), remove the .show class on the current slide, and add it to that sibling. This will move the presentation to the previous slide.

We do the exact opposite of this in the function moveToRightSlide . Because nextElementSibling is the opposite of previousElementSibling , we'll be getting the next sibling instead.

Code for Showing the Presentation in Full Screen and Small Screen

Recall that we also added click event listeners to the full screen and small screen icons. Here's the function responsible for toggling full-screen mode:

Recall that presentationArea refers to the element that wraps the whole presentation. By adding the class full-screen to this element, we trigger the CSS that will expand it to take up the whole screen.

Since we're now in full-screen mode, we need to show the icon for reverting back to the small screen by adding the class .show to it. Finally, we update the variable screenStatus to 1.

For the smallScreenMode function, we do the opposite—we remove the class full-screen , show the expand button icon, and update screenStatus .

Hiding the Left and Right Icons on the First and Last Slides

Now, we need to invent a way to hide the left and right buttons when we're on the first slide and last slide respectively.

We'll use the following two functions to achieve this:

Both these functions perform a very simple task: they check for the current slide number and hide the left and right buttons when the presentation is pointing to the first and last slide respectively.

Updating and Displaying the Slide Number

Because we're making use of the variable currentSlideNo to hide or show the left and right button icons, we need a way to update it as the user navigates through the slides. We also need to display to the user what slide they are currently viewing.

We'll create a function getCurrentSlideNo to update the current slide number:

We start the counter at 0, and for each slide on the page, we increment the counter. We assign the active counter (i.e. with the class .show ) to the currentSlideNo variable.

With that in place, we create another function that inserts some text into the slide counter:

So if we were on the second slide, for example, the slide's counter would read: "2 of 6".

Putting Everything Together

To ensure that all of these functions run in harmony, we'll run them in a newly created init function that we'll execute at the start of the script, just below the references:

We must also run init() at the bottom of both the moveToLeftSlide and moveToRightSlide functions:

This will ensure that the init function runs every time the user navigates left or right in the presentation.

Wrapping Up

I hope this tutorial helped you understand basic web development better. Here we built a presentation slideshow from scratch using HTML, CSS, and JavaScript. It's a great way to get into creating dynamic HTML with JavaScript PPT 

With this project, you should have learned some basic HTML, CSS, and JavaScript syntax to help you with web development.

• My presentations

Auth with social network:

Download presentation

We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!

Presentation is loading. Please wait.

Introduction to HTML and CSS

Published by Helen Higgins Modified over 9 years ago

Similar presentations

Presentation on theme: "Introduction to HTML and CSS"— Presentation transcript:

HTML Basics Customizing your site using the basics of HTML.

Chapter 3 – Web Design Tables & Page Layout

Introduction to HTML & CSS

Cascading Style Sheets (CSS). Cascading Style Sheets With the explosive growth of the World Wide Web, designers and programmers quickly explored and reached.

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.

Cascading Style Sheets

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.

Building a Website: Cascading Style Sheets (CSS) Fall 2013.

1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.

Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.

XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

Cascading Style Sheet (CSS) Instructor: Dr. Fang (Daisy) Tang

4.01 Cascading Style Sheets

Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.

About project

© 2024 SlidePlayer.com Inc. All rights reserved.

• Request PPT
• Privacy Policy

HTML Basics PPT

• Share on Facebook
• Share on Twitter
• Share on Google+
• Share on Reddit
• Share on Pinterest
• Share on Linkedin
• Share on Tumblr

HTML (abbreviated as HyperText Markup Language) is a computer language used to develop web pages with the help of various tags and attributes. The major advantage is that it is easy to learn and code even for a newbie. Almost every web browsers and websites use HTML for creating web contents. So, it is necessary for everyone to know about HTML and its capabilities.

If you are new to HTML, have a look at the below HTML Basics PPT:

Download (PPTX, 1.2MB)

• More By Yogi
• More In Computer

What is ChatGPT PPT

Swarm Robotics PPT

3D Printer PPT

Blue Brain PPT

ChatGPT is a conversational language model developed by OpenAI. It is based on the GPT (Ge…

Bio Mechatronic Hand PPT

Hydraulics PPT

Smart Sensors PPT

Create beautiful stories

WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.

WebSlides 1.5.0 Github

Why WebSlides?

Good karma & Productivity.

An opportunity to engage.

WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.

Work better, faster.

Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.

Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Making an HTML presentation has never been so fast .

→ Simple Navigation

Slide counter, 40 + beautiful components, vertical rhythm, 500 + svg icons, webslides demos.

Contribute on Github . View all ›

If you need help, here's just some tutorials. Just a basic knowledge of HTML is required:

• Components · Classes .
• WebSlides on Codepen .
• WebSlides Media: images, videos...

Built to expand

The best way to inspire with your content is to connect on a personal level:

• Background images: Unsplash .
• CSS animations: Animate.css .
• Longforms: Animate on scroll .

Ready to Start?

Create your own stories instantly. 120+ premium slides ready to use.

Free Download Pay what you want.

People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.

@jlantunez , @ant_laguna , and @luissacristan .

• Preferences

An Introduction to HTML - PowerPoint PPT Presentation

An Introduction to HTML

Html stands for hyper text markup language, a language with set of markup tags to describe web pages. an html file must have an .htm or .html file extension. html is comprised of “elements” and “tags” that begins with and ends with . – powerpoint ppt presentation.

• A markup language is a set of markup tags
• What Is HTML?
• Markup language for describing web pages
• HTML stands for Hyper Text Markup Language, a language with set of markup tags
• Documents are described by HTML tags
• Each HTML tag describes different document content
• An HTML file must have an .htm or .html file extension
• HTML files can be created with text editors
• NotePad, NotePad , PSPad
• Or HTML editors (WYSIWYG Editors)
• Microsoft FrontPage
• Macromedia Dreamweaver
• Netscape Composer
• Microsoft Word
• Visual Studio
• HTML is comprised of elements and tags
• Begins with lthtmlgt and ends with lt/htmlgt
• Elements (tags) are nested one inside another
• Tags have attributes
• HTML describes structure using two main sections ltheadgt and ltbodygt
• The HTML source code should be formatted to increase readability and facilitate debugging
• Every block element should start on a new line
• Every nested (block) element should be indented
• Browsers ignore multiple whitespaces in the page source, so formatting is harmless
• For performance reasons, formatting can be sacrificed
• An HTML element consists of an opening tag, a closing tag and the content inside.
• Hyperlink tags
• Text formatting tags
• Tags can have attributes
• Attributes specify properties and behavior
• Few attributes can apply to every element
• Id, style, class, title
• The id is unique in the document
• Content of title attribute is displayed as hint when the element is hovered with the mouse
• Some elements have obligatory attributes
• Heading Tags (h1 h6)
• Paragraph Tags
• Sections div and span
• HTML documents must start with a document type definition (DTD)
• It tells web browsers what type is the served code
• Possible versions HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5
• See http//w3.org/QA/2002/04/valid-dtd-list.html for a list of possible doctypes
• Contains information that doesnt show directly on the viewable page
• Starts after the lt!doctypegt declaration
• Begins with ltheadgt and ends with lt/headgt
• Contains mandatory single lttitlegt tag
• Can contain some other tags, e.g.
• lt!- comments --gt
• Title should be placed between ltheadgt and lt/headgt tags
• Used to specify a title in the window title bar
• Search engines and people rely on titles
• The ltbodygt section describes the viewable portion of the page
• Starts after the ltheadgt lt/headgt section
• Begins with ltbodygt and ends with lt/bodygt
• Text formatting tags modify the text between the opening tag and the closing tag
• Ex. ltbgtHellolt/bgt makes Hello bold
• Link to a document called form.html on the same server in the same directory
• Link to a document called parent.html on the same server in the parent directory
• Link to a document called cat.html on the same server in the subdirectory stuff
• Inserting an image with ltimggt tag
• Image attributes
• Block elements add a line break before and after them
• ltdivgt is a block element
• Other block elements are lttablegt, lthrgt, headings, lists, ltpgt and etc.
• Inline elements dont break the text before and after them
• ltspangt is an inline element
• Most HTML elements are inline, e.g. ltagt
• ltdivgt creates logical divisions within a page
• Block style element
• Used with CSS
• Inline style element
• Useful for modifying a specific portion of text
• Don't create a separate area (paragraph) in the document
• Very useful with CSS
• Tables represent tabular data
• A table consists of one or several rows
• Each row has one or more columns
• Tables comprised of several core tags
• lttablegtlt/tablegt begin / end the table
• lttrgtlt/trgt create a table row
• lttdgtlt/tdgt create tabular data (cell)
• Tables should not be used for layout. Use CSS floats and positioning styles instead
• Single-line text input fields
• Multi-line textarea fields
• Hidden fields contain data not shown to the user
• Often used by JavaScript code
• HTML is the universal markup language for the Web
• HTML lets you format text, add graphics, create links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and display
• The key to HTML is the tags, which indicates what content is coming up
• DOCTYPE declaration for HTML5 is very simple
• Use lt!DOCTYPE htmlgt instead of lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transition al.dtd"gt
• It uses UTF-8 and you define it with just one meta tag ltmeta charset"UTF-8"gt
• HTML5 new Supported Application Programming Interfaces
• Geolocation - Now visitors can choose to share their physical location with your web application
• Drag and drop - Drag and drop the items from one location to another location on a the same webpage.
• Persistent Local Storage - To achieve without resorting to third-party plug-ins.
• Web Workers - A next-generation bidirectional communication technology for web applications.
• Server-Sent Events - HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE)
• Removed Elements in HTML5
• New Semantic/Structural Elements in HTML5
• New Form Elements in HTML5
• New Graphics Media Elements in HTML5
• New Input Types in HTML5
• Input Types color,date,datetime,datetime-local,em ail,month,number,range,search,tel,time,url,week
• InputAttributeautocomplete,autofocus,form,formact ion,formenctype,formmethod,formnovalidate,formtarg et,height and width, list, multiple, min and max, placeholder, step, required
• New syntax in HTML5
• This example demonstrates the different syntaxes used in an ltinputgt tag
• Empty ltinput type"text" value"John" disabledgt
• Unquoted ltinput type"text" valueJohngt
• Double-quoted ltinput type"text" value"John Doe"gt
• Single-quoted ltinput type"text" value'John Doe'gt
• In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.
• Thank You..

PowerShow.com is a leading presentation sharing website. It has millions of presentations already uploaded and available with 1,000s more being uploaded by its users every day. Whatever your area of interest, here you’ll be able to find and view presentations you’ll love and possibly download. And, best of all, it is completely free and easy to use.

You might even have a presentation you’d like to share with others. If so, just upload it to PowerShow.com. We’ll convert it to an HTML5 slideshow that includes all the media types you’ve already added: audio, video, music, pictures, animations and transition effects. Then you can share it with your target audience as well as PowerShow.com’s millions of monthly visitors. And, again, it’s all free.

About the Developers

PowerShow.com is brought to you by  CrystalGraphics , the award-winning developer and market-leading publisher of rich-media enhancement products for presentations. Our product offerings include millions of PowerPoint templates, diagrams, animated 3D characters and more.

HTML basics exercises

Jan 02, 2020

1.68k likes | 2.23k Views

HTML basics exercises. Presentation Overview. Look at main technological components that make up modern Web pages HTML – HyperText Markup Language CSS – Cascading Style Sheets JavaScript JavaScript For each component What it is/isn't, can/can't do What kinds of constructs it comprises

Share Presentation

• hypertext reference
• href html html
• html hypertext markup language

Presentation Transcript

Presentation Overview • Look at main technological components that make up modern Web pages • HTML – HyperText Markup Language • CSS – Cascading Style Sheets • JavaScript JavaScript • For each component • What it is/isn't, can/can't do • What kinds of constructs it comprises • How to use it in Web pages • How it interacts with other components

HTML Components • Documents • Document = page = HTM file = topic • Content (text, images) • Tags (display commands) • Other terms • Window: browser display window • URL: Uniform Resource Locator • Hyperlink: hypertext jump to a resource • Resource: URL, image, mailto, external file

HTML Pages • HTML pages are tag-based documents • Really plain ASCII text files • Don't look like documents they represent • Tags indicate how processing program should display text and graphics • Designed to describe hypertext, not paper • Processed by browsers "on the fly" • Tags usually appear in pairs • Most have reasonable names or mnemonics • Most can be modified by attributes/values

START TAG END TAG <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> <H1>, <H2>, ... </H1>, </H2>, ... <IMG ...> </IMG> (optional) <A ...> </A> <P> </P> (optional) <BR> (none; "empty" tag) <OL> </OL> <UL> </UL> <LI> </LI> (optional) Some HTML Tag Examples

HTML Document Layout • Example of basic tag positioning • Always think containers! • Tag pairs that enclose content <html> <head> <title>Title bar text</title> </head> <body> <p>Look, I'm a paragraph!</p> </body> </html>

Some Common Text Tags • Heading levels • h1 – h6, numbers inverse to text size<h1>Heading One</h1> <h2>Heading One</h2> • Paragraph • Probably the most common tag<p>Yada yada yada...</p> • Line break (an empty tag) • Used when <p>'s white space not wantedThis line will break<br>right there • Note white space or lack thereof in HTML source does not matter!

Attributes and Values • Properties, qualitys, or characteristics that modify the way a tag looks or acts • Usually in pairs: <body bgcolor="teal"> • Sometimes not: <dl compact> • Most HTML tags can take attributes • Format of value depends on attribute • width="150" ... href="page3.htm"notwidth="page3.htm" ... href="150"

The Anchor Tag (1) • The tag that puts the HTM in HTML • <a> ... </a> (useless by itself) • Must have attributes to be useful • HREF (Hypertext REFerence) attribute • Makes a jump to someplace (URL)<a href="mypage.htm">My Page</a><a href="www.google.com">Google</a> • Link text is underscored by default • Whatever is between <a> and </a> is hot (clickable) • Clicking makes the link go somewhereor do something

The Anchor Tag (2) • Some link examples text only image only both

Images (1) • Used in pages for various reasons • Clarification, navigation, peripheral training • Images not in page; referenced by page • Graphics are separate, required files • Usually GIFs or JPGs, sometimes others • Can be anywhere in document body: in paragraphs, headings, lists, anchors, etc. • Place image with <img> tag • Like <a>, <img> is useless by itself • All work is done with attributes/values

Images (2) • Main attribute: SRC • Tells page where to find the image • File name can be local, relative, or full • Case sensitivity depends on server • Animated GIFs added same as static <img src="smiley.gif"> <img src="./pix/mypic.jpg"> <img src="http://www.myweb.com/mail.gif">

Overview • Web documents • Server-side programming • Client-side programming • Web services

Dynamic vs. Static Web Sites Web pages can be either static or dynamic. "Static" means unchanged or constant, while "dynamic" means changing or lively. Therefore, static Web pages contain the same prebuilt content each time the page is loaded, while the content of dynamic Web pages can be generated on-the-fly. • What is Web content? Content is everything that can appear on a Web page: text, graphics, form fields, hyperlinks to other pages, navigation buttons, menus, etc.

Advantages of static websites • Quick to develop • Cheap to develop • Cheap to host Disadvantages of static websites • Requires web development expertise to update site • Site not as useful for the user • Content can get inactive

Advantages of dynamic websites • Much more practical website • Much easier to update • New content brings people back to the site and helps in the search engines • Can work as a system to allow staff or users to collaborate • Disadvantages of dynamic websites • Slower / more expensive to develop • Hosting costs a little more

Standard HTML pages are static Web pages. Each time an HTML page is loaded, it looks the same. The only way the content of an HTML page will change is if the Web developer updates and publishes the file • Other types of Web pages, such as PHP, ASP, and JSP pages are dynamic Web pages. These pages contain "server-side" code, which allows the server to generate unique content each time the page is loaded. • database information, which enables the page's content to be generated from information stored in the database. Websites that generate Web pages from database information are often called database-driven websites.

You can often tell if a page is static or dynamic simply by looking at the page's file extension in the URL, located in the address field of the Web browser. If it is ".htm" or ".html," the page is probably static. • If the extension is ".php," ".asp," or ".jsp," the page is most likely dynamic. While not all dynamic Web pages contain dynamic content, most have at least some content that is generated on-the-fly.

<html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> </head> <body> سلام </body> </html>

Quiz on HTML 1. What is the code for creating a red background in an HTML document?   2. What will the tag <b> do? 3. What command would you use to put a blank line in a program? 4. Write the code that displays a graphic file called "DOG.PNG", that is 200 by 400 pixels and is left justified. 5. Write the code to create a hyper-link to the Greenpeace homepage, where their address is "www.greenpeace.org". 6. Write the code for a two-by-two table and is numbered 1-4. 7. Fix any errors in the following code. <html> <head> <title>My first page </head> <body>

HMTL stands for hypertext markup language useful for developing web pages.Using HTML we can add paragraphs, headings, images into web pages.

Hyperlink A hyperlink is a structure unit that connect two WebPages. This connection is realized by inserting a hyperlink which indicates the URL of destination page. If there is a hyperlink from page P to page Q, the P is called a parent of Q and Q is called a child of P. If two pages have at least one common parent page, the two pages are called Siblings Thursday, January 2, 2020 Dr.kamaran HamaAli

Simple website structure Index.html 234 2.html 134 3.html 12 4 4.html 1 2 3 Thursday, January 2, 2020 Dr.kamaran HamaAli

Html- hypertext reference(href) The href attribute defines references that link to basically this is where the user will be taken if they wish to click this link Thursday, January 2, 2020 Dr.kamaran HamaAli

Hypertext Reference Local Link to another pages within your domain Internal Link to anchors on the page Global Link to another domain at side of your side Thursday, January 2, 2020 Dr.kamaran HamaAli

internal <html> <body> <h2 id="top">Top of page!</h2> <p></p> <a href="#top">Go to top</a> </body> </html>

local <a href="file:///C:/Users/Kamaran%20Faraj/Documents/My%20Web%20Sites/index.htm">LEC</a> <a href="new_page_1.htm">LEC1</a> <a href="new_page_2.htm">LEC2 </a>

global < a href=http://www.southbank.ac.uk> http://www.southbank.ac.uk </a>

Test Page: • Your <BODY> tag: <BODY BGCOLOR="#ffffff" BACKGROUND="" TEXT="#000000" LINK="#0000ff" VLINK="#663399" ALINK="#ff0000"> • Add font size & face attributes and bold & italic tags to your documents as needed. Also be sure to move your background image. 

TEXT which sets the color of text on the web page LINK which sets the color of links you haven't followed VLINK which sets the color of links you have followed ALINK which sets the color of links as you click on them

HTML - What is image mapping in HTML?  Making one image link to several pages is called as image mapping.For example, if you have a map of Kurdistan , then clicking on a state can take to to another page and likewise for other states. 

Search engine optimization

navigation • <!DOCTYPE html> • <html> • <body> • <nav> • <a href="/html/">HTML</a> | • <a href="/css/">CSS</a> | • <a href="/js/">JavaScript</a> | • <a href="/jquery/">jQuery</a> • </nav> • </body> • </html>

Web Site Creation Using Template Using Wizards From the Basics Dr. kamaran Faraj 37

Planning your site online In order to be able to upload a web Page to the Internet, it's necessary to hire a web hosting company to make your web site available to others on the internet 24 hours a day. The price to have your own space on their servers will depend on the company, the space on disk you need, For these reasons, it is not recommended to use a free hosting for a bussiness Page, although it is acceptable for a personal one.

There are companies that offer this service for free, but with certain limitations: just a few disk space, slowness and a name for our Page preceded by their own etc... • It's also necessary to consider that these companies must generate income in some way it is the reason why they are dedicated to sell advertising spaces within your Pages, ads that we'll not be able to avoid including in our web Pages.

When we are going to hire a web hosting service it is necessary to also contract a domain, a task which usually is in charge of the hosting company. To register a domain consists of registering a name for our Page. This name cannot be repeated in Internet, has to be unique, as happens with the names of the companies. It's possible to register the same name with different extensions, like for example, .net, .org, .biz or .com.

A worldwide collection of electronic documents Also called the Web Each electronic document is called a Web page Can contain text, graphics, audio, video, and built-inconnections A Web site is a collection of related Web pages The World Wide Web • What is the World Wide Web (WWW)?

MicrosoftInternetExplorer Netscape Firefox Opera Safari The World Wide Web • What is a Web browser? • Program that allows you to view Web pages

The World Wide Web • What is a home page? • The first page that a Web site displays • Often provides connections to other Web pages

co com ac edu gov org Domainname www.gtslearning. is the domain name of the server. .co identifies the website as a commercial organisation. It is convention that commercial sites use co or com ac or edu (for academic or education) gov and org use for governmental or non-profit organisations . .co.uk indicates that the site belongs to a commercial organisation registered in the UK

<HTML> • <HEAD> • <TITLE>Eat healthy and live healthy</TITLE> • </HEAD> • <BODY LINK="Green" ALINK="Blue" VLINK="Red"> • <CENTER> • <H1> • <FONT COLOR="maroon">KHAO PIYO RESTAURANT</FONT> • </H1> • </CENTER> • <IMG SRC="RESTAURANT. jpg" ALIGN="right" HEIGHT=225 • WIDTH=250> • <FONT COLOR="purple" SIZE=5> • Collect information for • <UL> • <LI><A HREF="one.html">menus</A> • <LI><A HREF="two.html">reservation</A> • <LI><A HREF="three.html">catering</A>

<LI><A HREF="four.html">tours</A> • </UL> • </font> • <font size =5> • <CENTER> • <TABLE BORDER=2 BORDERCOLOR="blue" > • <font color =blue><CAPTION> Menus available are</CAPTION></font> • <TR> • <TD> 1 • <TD> INDIAN • <TR> • <TD> 2 • 11 • <TD> ITALIAN • <TR> • <TD> 3 • <TD> CONTINENTAL • <TR> • <TD> 4 • <TD> THAI • </TABLE> • </CENTER> • <BR> • For further enquiries and reservations <A HREF="mailto:[email protected]">Contact Us</A> • </font> • </BODY> • </HTML>

Internet Database Web Server Web Client Server-side Programming Skills that are often required: • CGI • PHP • ASP • Perl • Java Servlet, … Client-side Programming Skills that are often required: • XHTML • Javascript • Java • Dreamweaver • Flash • SMIL, XML …

You create your web site on your hard drive, but you will place or publish your files on a web server so they will be accessible via the web. This means that you will have to arrange with a company that has a web server to accept or host your site.

• More by User

HTML Basics

HTML Basics. HTML, Text, Images, Tables, Forms. Svetlin Nakov. Telerik Corporation. www.telerik.com. Table of Contents. Introduction to HTML How the Web Works? What is a Web Page? My First HTML Page Basic Tags: Hyperlinks, Images, Formatting Headings and Paragraphs HTML in Details

1.04k views • 75 slides

HTML Overview. Hypertext Markup LanguageLanguage of the webForms web pages. XHTML. More stringent standardBetter behaved across browsersWorks with other devices. Tools for web editing. Any text editor is OKFirefox is very handy browserWeb Developer ExtensionMozEdit Extension. Basic Web Page.

440 views • 22 slides

Writing HTML. Can use a:1) text editor such as Notepad and manually type the HTML tags2) web page editor such as MS FrontPage or Macromedia's Dreamweaver. HTML Tags. = commands written between less than (<) and greater than (>) signsThere are usually both opening and closing tags for each command

633 views • 43 slides

HTML Basics. What is HTML? . HTML stands for HyperText Markup Language and it is used to display the content you read and see on the web. How is HTML written?. HTML is comprised of one word commands enclosed within a less than and greater than sign. &lt;html&gt;. What is XHTML .

536 views • 15 slides

HTML basics

HTML basics. Before you begin View source option Select file / save and edit a page on your hard drive From your browser pull up the doc you just saved You can now view the file as you edit it. Page Structure. Header: &lt;html&gt;&lt;head&gt; … &lt;/html&gt;&lt;/head&gt; Title tag Meta tags CSS content

226 views • 7 slides

HTML Basics. Ali Alshowaish. What is HTML?. HTML stands for H yper T ext M arkup L anguage Specifically created to make World Wide Web pages Web authoring software language Created by Tim Berners-Lee in late 1980s from SGML . What is HTML?.

607 views • 31 slides

Basics of HTML

&lt;html&gt; &lt;head&gt; &lt;title&gt; Basic HTML PowerPoint &lt;/title&gt; &lt;/head&gt; &lt;body&gt; How Hyper Text Markup Language Works &lt;/body&gt; &lt;/html&gt;. Basics of HTML. 2 ways to view a webpage

660 views • 8 slides

HTML Basics. YOU WILL LEARN TO…. 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 lists using HTML View an HTML document. HTML Basics. YOU WILL LEARN TO…. Section 4.3

1.52k views • 41 slides

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 .

351 views • 21 slides

Basics of HTML. Shashanka Rao. Learning Objectives. 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters. 4. Lists 5. Div tag 6. Anchor Elements. HTML Overview.

345 views • 15 slides

HTML Basics. ICS 415 Cam Moore 29 Aug 2013. What is HTML. Hypertext Markup Language Basis for the World Wide Web ASCII Text document Used by Web browsers to present text and graphics HTML documents include markup tags and plain text to describe the contents of the document.

434 views • 17 slides

HTML Basics. BCIS 3680 Enterprise Programming. Web Client/Server Architecture. Your browser (the client) requests a Web page from a remote computer (Web server). The Web server locates the requested page and, if the requested page is a dynamic page, executes programming code.

342 views • 20 slides

HTML / CSS – Basics

HTML / CSS – Basics. Why the heck are we doing this ?. HTML. HyperText Markup Language. CSS. Cascading Style Sheets. Reasons to learn HTML and CSS. Presentation. Content. Structure. Layout / Design. I have some content , how do I structure it ?.

946 views • 22 slides

HTML Basics. 18 January 2011. What We Are Doing. How a Computer Works. Question: What film character is a good analogy to a computer? Answer It is actually a very simple machine: It executes exactly what it is told to do. Viewing a Web Page. SERVER web page repository

262 views • 18 slides

HTML BASICS

HTML BASICS. Web Design I. Web Design. WWW created in the late 1980’s Used in academics for the next 5 years Mosaic (1994) allowed both pictures &amp; text in Web Pages {freeware out of University of Illinois Champaign-Urbana) Netscape Navigator (1995). Web Design. Internet Explorer Firefox

430 views • 27 slides

HTML BASICS. 7.1 Format HTML tags Identify HTML guidelines 7.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create lists using HTML View an HTML document 7.3 Insert images using HTML Insert links using HTML Debug and test a Web page.

446 views • 18 slides

HTML Basics. HTML: The Language of the Web. Web pages are text files, written in a language called Hypertext Markup Language or HTML . HTML allows Web authors to create documents that can be displayed across different operating systems.

172 views • 14 slides

HTML Basics. BCHB697. Outline. Hypertext Markup Language (HTML) Headings, Paragraphs Images, Anchors Tables CSS Forms, Events. HTML. XML-style document that describes how the web-browser should present the page Focus is on human as the consumer Display, layout oriented

243 views • 21 slides

HTML Basics. (Part-3). HTML Images. The Image Tag and the Src Attribute In HTML, images are defined with the &lt;img&gt; tag.  The &lt;img&gt; tag is empty, which means that it contains attributes only and it has no closing tag.

216 views • 18 slides

HTML Basics. (Part-2). HTML Elements. An HTML element is everything from the start tag to the end tag. &lt;p&gt;This is a paragraph&lt;/p&gt; HTML Element Syntax -An HTML element starts with a start tag -An HTML element ends with an end tag

226 views • 17 slides