HTML

Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content... —

Welcome!

Welcome to the second half of this course that includes applying the theories you learned into practice by developing your first responsive web page using mobile first technology!

HTML

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page.

Practice

This is the first of eight practice lesson / assignments by w3schools.com starting with the basic html document that will evolve into a functional web page. This site was developed with them too!

HTML

HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items.   HTML elements are delineated by tags, written using angle brackets... —

Browsers

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages.   HTML describes the structure of a web page semantically and originally included cues for its appearance... —

1

Root Folder

Step 1: Create a root folder on your USB memory device (not on the lab PC's or a personal Cloud). You may not always have Internet access, but you'll still be able to edit files.)

2

Root Folder

3

Sub Folders

Step 3: Create four subfolders inside the root folder and name them exactly how you see them: (audio, css, images, and videos). Do not change the folder names! Example

4

Sub Folders

Step 4: Upload the four folders into your folder that was shared with you on the Course OneDrive.   Refer back to the link in your email invitation and the directions in the Blackboard Assignment.

Web pages can be created and modified by using professional and open source HTML Editors ...—

Adobe Dreamweaver is available in our classroom. Learn about Creative Cloud Pro available at a great price for students and teachers. (20+ Apps!)

1

Step 1: Notepad++ is free and also available in class so students can edit files on off campus without a supscription. Follow the steps below to create your first web page. See nine YT Video Tutorials.

2

index

Step 2: Open a new file and save it as: index...— [File: > name > index]   [Save as type: Hyper Text Markup Language file] It should appear as index inside your root folder.

3

index

Step 3: Save index.html inside the root folder: making sure it is NOT inside any subfolders.   If done correctly, it should appear below the subfolders as seen above: 2280 Website.

4

index

Step 4: Open index.html in any Internet browser window:   Browser Tab > File Bar > Open > locate your index file OR   Browser Window (Keyboard Shortcut: Ctrl + O) > locate your index file.   Leave index open in Notepad++ AND your browser tab and bookmark your page.

5

w3

5: Open w3schools Lesson: HTML and select, copy, and paste the "Learning by Example" > Example into your index file.

6

Save!!

Step 6: Save your work often: (Keyboard: Ctrl + s) and refresh your browser. We will inspect the Basic HTML Document and Page Structure.

7

Elements

Step 7: The HTML Element (tag) is everything from the start tag to the end tag. 7a. Open your combined weeks 4 and 5 WORD documents G1 to select and copy (Website Name, Your Name, Slogan, Introduction, About, and Purpose headings and paragraghs with "dense" content and reduced "chunked" bullet text) and paste it into your index file in the 'body section' G2 7b.. 'Tab' content over to show nestled content. Save. Refresh browser G3.

HTML Attributes provide additional information about elements and are always specified in the start or opening tag. G6 shows basic HTML styles such as text size, color, and alignment added in tags to control basic formatting browser defaults.

!doctype

The !doctype html declaration defines that this document is an HTML5 document. All HTML documents must start with a document type declaration.

html

The HTML Element is the root element of an HTML page. After the !doctype declaration, the opening and closing html elements are the first and last elements of a page and they contain everything in between.

head

The Head Element is a container for metadata (data about data) and is placed between the html tag and the body tag. HTML metadata is data about the HTML document. It also contains the page's title, links to external cascading style sheets (CSS), and JavaScripts.

We will cover more about the head element and section in depth week 10.

8

title

Step 8: The Title Element defines the title of the document, browser toolbar and the page's tab. It provides a title for the page when it is added to favorites. It also displays a title for the page in search engine results and is very important for search engine optimization (SEO) and algorithms. It is required and must be text-only so be descriptive and avoid 'one' or two-word titles. Search engines will display ~50-60 characters of the title, so try not to have longer titles. Add a title to your index file.

meta

The Meta Element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings. The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services.

link

The Link Element defines the relationship between the current document and an external resource such as your future cascading style sheet (CSS) file that will be created and saved inside your css folder.

Style

The Style Element is used to define the same styles for a 'single' HTML page inside the 'head section'. You can customize the appearance of HTML elements, create layout structures, and control the overall design of your web page. .

Script

The Script Element is written inside the opening and closing 'script' tags inside the 'head section' and is used to embed a client-side script (JavaScript). It either contains scripting statements, or it points to an external script file through the 'src' attribute.

body

The Body Element defines the document's body and contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

navigation

Navigation Menus helps users to easily navigate between different sections of a website. They are typically located at the top or at the side of a webpage.

header

The HTML Header Element represents a container for introductory content or a set of navigational links. It typically contains one or more heading elements (h1 - h6), logo or icon, and authorship information.

columns

The HTML Column Element: How the content of a website should be shown, often depends on the device of the users. The most common responsive layouts are one and two columns: Five columns are shown for 'responsive' effect. This element will be covered later.

9

Headings

Step 9: The HTML Heading Element is a title or subtitle defined with h1 to h6 tags. You have h1 (which should be your website name, now add five more headings (h2-h6) to your index file. Apply headings to your index file G4. Save. Refresh Browser G5 .

10

Paragraphs

Step 10: The Paragraph Element defines a paragraph. It always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph. Apply opening and closing paragraph tags to your index file. G4. Save. Refresh Browser G5.

11

Basic Style

Step 11: The Basic HTML style is an'attribute' inside opening tags and is used to add colors, fonts, sizes, and more to make information easier to understand, but the design is set by browsers, and each browser can set its own style and the same layout may appear different, depending on the browser, operating system, and system settings. Using the style attribute, add a color and size each heading and paragraph. Be consistent.

12

Formatting

Step 12: Formatting Elements were designed to display special types of text:   Bold text, Important text, Underlined text, Italic text, Emphasized text, Marked text, Smaller text, Deleted text, Inserted text, _{Subscript text}, ^{Superscript text}, Text quotes.

Add each formatting element into paragragh one. They can be removed appropriately in later assignments.

13

Typography

Step 13: Typography shapes the voice of your interface. Combine semantic HTML with CSS font, size, weight, and spacing utilities to craft clear, readable content.

Inside the style attributes already added, add a font style to each heading and paragraph. Be consistent.

Tables

The HTML Table Element is written inside the opening and closing 'table' tags inside the 'body section' HTML tables allow web developers to arrange data into rows and columns.

14

Lists

Step 14: The HTML List Element is used to allow web developers to group a set of related items in lists. The list items will be marked with bullets (small black circles by default), numbers or letters: Add an ordered list in your index file.

15

Comments

Step 15: The HTML Comment Elements are not displayed in the browser, but they can help document your HTML source code. Notice that there is an exclamation point (!) in the start tag, but not in the end tag. Note: Comments are not displayed by the browser, but they can help document your HTML source code, with i.e. notifications and reminders. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.

Color Names

Step 16: HTML Colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values. HTML supports 140 standard color names. This website's page background color is AliceBlue. Using the 'style' attribute inside the opening body tag, add a color name to your page's background.

RGB Colors

Step 16: RGB Color Values such as a RGB and RGBA color value represents RED, GREEN, and BLUE light sources. and an Alpha channel (opacity). Each parameter defines the intensity of the color between 0 and 255. There are 256 x 256 x 256 = 16,777,216 possible colors! This website's page background color is rgb(240, 248, 255). Now try an RGB color!

HEX Colors

Step 17: HEX (hexadecimal) Colors are specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. #rrggbb. Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). This website's page background color is #f0f8ff. Add a hexadecimal color!

HSL Colors

Step 18: RGB Color Values such as a RGB and RGBA color value represents RED, GREEN, and BLUE light sources. and an Alpha channel (opacity). Each parameter defines the intensity of the color between 0 and 255. There are 256 x 256 x 256 = 16777216 possible colors!