Overview of HTML Three Different Approaches Text editor

Overview of HTML

Three Different Approaches Ø Text editor: Notepad, Brackets, BBEdit, etc. Ø HTML editor such as: – Dream. Weaver – Blue. Griffon – Kompo. Zer – Coffee. Cup, Etc. Ø Content Management: Word. Press, Wix, Square. Space, etc.

Why do it the hard way… Ø Web site development is much more sophisticated than HTML & CSS. Ø Other languages include, but not limited to: § Java. Script, Sass, Angular JS, Ruby on Rails, XML, PHP, E-commerce, Ajax, j. Query, ASP, Python, etc. Ø Need to be able to tweak codes from web editors.

What is HTML? Ø HTML (Hyper. Text Markup Language) is a special language which tells the browser how to format text in a www document. Ø An HTML file consists of text and tags. Ø HTML uses CSS for page layout and design Ø HTML 5 and CSS 3: still evolving, include more features, better plugin support, and more semantic tags.

Syntax Ø Contains tags that dictate how the content will appear, i. e. formatting. Ø Examples: <b>Happy</b> Applies bold to the word Breaks the line Ø Some tags include attributes that alter the basic command, for example: <h 1 class=“feature”> Welcome </h 1>

Other Characteristics Ø The format is text files, with. htm or. html extension. Ø Hard returns, tabs, and extra spaces are ignored. Ø DO NOT use spaces in file names. Ø File names ARE CASE SENSITIVE. Ø Tags are not case sensitive, but the standard is lowercase.

One More Thing… The first page in a web site should be named index. htm or index. html. Because it’s the default filename, it nicely shortens your URL example: www. cofc. edu instead of: www. cofc. edu/index. htm

Displaying an HTML File Ø Use any browser software – such as Chrome, Firefox, Internet Explorer, Safari, etc. Ø Also, use any OS —such as Windows, IOS, Linux, Android, etc.

Beginning Skills for Chap 2 • The basic tags for an HTML file • Heading tags • Paragraph tags • Use attributes (such as width=" ") • Line breaks • Indent with blockquote • We will also insert an image

In-Class Practice OBJECTIVE: As time permits, we will create a simple page with these features: - Basic template - Headings - Paragraphs - Italic and bold

Get Started …First you will download a text editor. …For practice only; not to turn in. …When creating web sites, it is extremely important to organize files in the proper folders.