first steps of programming with html

15
1st step of programming with HTML - Kanha Sahu HTML Hypertext Markup Language

Upload: kanha-sahu

Post on 09-Jan-2017

257 views

Category:

Education


1 download

TRANSCRIPT

Page 1: First steps of programming with html

1st step of programming with HTML- Kanha Sahu

HTMLHypertext Markup Language

Page 2: First steps of programming with html

About HTML

HTML is a markup language for describing web documents (web pages).

HTML stands for Hyper Text Markup Language

A markup language is a set of markup tags HTML documents are described by HTML tags Each HTML tag describes different document content

HTML tags are keywords (tag names) surrounded by angle brackets:

HTML

HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript.

HTML is a cornerstone technology used to create web pages, as well as to create user interfaces for mobile and web applications. Web browsers can read HTML files and render them into visible or audible web pages.

HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.

Page 3: First steps of programming with html

HTML Page StructureBelow is a visualization of an HTML page structure:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

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

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

</body>

</html>

HTML

Page 4: First steps of programming with html

Code Pattern :

<p align=“center”>This is my first HTML pages.</p>

HTML

<TAG ATTRIBUTE=“VALUE”></TAG>

Open P(paragraph) Tag

<>

</>

Close P(paragraph) Tag

Attribute of P(paragraph) Tag

Value of attribute P(paragraph) Tag

Open Tag

Close Tag

Explanation :

Page 5: First steps of programming with html

Software• Browser & Editor

Experiments• Write a Program

HTML

Page 6: First steps of programming with html

Tools

Browser HTML CSS JS OS KAS RateInternet Explorer v9 & +

HTML 5 CSS 3 Windows

Mozilla Firefox HTML 5 CSS 3 Windows, Linux, Android, Ubuntu

Google Crome HTML 5 CSS 3 Windows, Linux, Android, Ubuntu, MAC

Safari HTML 5 CSS 3 MAC,Windows

Opera HTML 5 CSS 3 Windows Torch HTML 5 CSS 3 Windows Comodo IceDragon HTML 5 CSS 3 Windows

BROWSER EDITOR

KASLAB
www.kaslab.in/
Page 7: First steps of programming with html

Tools

Text Editor Suggestion Color Mode KAS RateAdobe Dreamweaver Offline Notepad ++ Offline Sublime Text Offline Codepen Online Jsfiddle Online Netbeans Offline HTML-Kit Offline Aptana Studio Offline PSPad Offline

BROWSER EDITOR

KASLAB
www.kaslab.in/
Page 8: First steps of programming with html

Notapad ++E xa m p l e

Page 9: First steps of programming with html

About Notepad ++ Notepad++ is a free (as in "free speech" and also as in

"free beer") source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License.

Based on the powerful editing component Scintilla, Notepad++ is written in C++ and uses pure Win32 API and STL which ensures a higher execution speed and smaller program size. By optimizing as many routines as possible without losing user friendliness, Notepad++ is trying to reduce the world carbon dioxide emissions. When using less CPU power, the PC can throttle down and reduce power consumption, resulting in a greener environment.

NPPAbout•About Tool

Download•Download Turbo C

Install•Installation & Configuration

Experiments•Write a Program

References•Books, Tutorials and Other Links

Page 10: First steps of programming with html

Download NPP https://notepad-plus-plus.org/

About•About Tool

Download•Download Turbo C

Install•Installation & Configuration

Experiments•Write a Program

References•Books, Tutorials and Other Links

NPP

Page 11: First steps of programming with html

Installation & configurationAbout•About Tool

Download•Download Turbo C

Install•Installation & Configuration

Experiments•Write a Program

References•Books, Tutorials and Other Links

NPP

Page 12: First steps of programming with html

Installation & configurationAbout•About Tool

Download•Download Turbo C

Install•Installation & Configuration

Experiments•Write a Program

References•Books, Tutorials and Other Links

NPP

Page 13: First steps of programming with html

ExampleAbout•About Tool

Download•Download Turbo C

Install•Installation & Configuration

Experiments•Write a Program

References•Books, Tutorials and Other Links

HTML

1. Open any text editor or Notepad ++2. Write Your HTML Code

3. Create a Folder for each project like “html_example”

4. Save As or CTRL + Sfile name : FileName.html andsave as type : All files (“ . ”)

Page 14: First steps of programming with html

View OutputAbout•About Tool

Download•Download Turbo C

Install•Installation & Configuration

Experiments•Write a Program

References•Books, Tutorials and Other Links

1. To View the Output of your code go to the project folder

2. Double Click on ‘.html’ file or open with browser like Google Crome, Mozilla Firefox, Safari etc…

HTML

Source Code - Input

Result - Output

Page 15: First steps of programming with html

References Downloads :

https://notepad-plus-plus.org/ Official Site:

1. https://notepad-plus-plus.org/ Books:

http://kaslab.blogspot.in/2015/03/html-notes.html History:

http://www.w3schools.com/html/ https://en.wikipedia.org/wiki/HTML

HTML