Creating a Simple Web Page

By High School Technology Services - myhsts.org Recap From Previous Session

We learned from previous session the following –

▪ What is Web Design? ▪ What is the difference between website and mobile app design? ▪ What is a programming language? A Web Page, Step by Step

What the following term mean: ▪ Web server: a system on the internet containing one or more web site ▪ Web site: a collection of one or more web pages ▪ Web pages: single disk file with a single file name ▪ Home pages: first page in website ▪ Think about the followings before working your Web pages. ▪ Think about the sort of information(content) you want to put on the Web. ▪ Set the goals for the Web site. ▪ Organize your content into main topics. ▪ Come up with a general structure for pages and topics ▪ (DOM) ▪ Determines the logical structure of HTML documents and how an HTML document is accessed and modified Text Editor

▪ You need a text editor to write code for creating HTML and CSS files ▪ When you write the code, you can save the files with . and . extensions ▪ A few text editors – Notepad, Notepad++, Sublime, Atom, VSCode etc. Document Structure

▪ Entire document enclosed within and tags ▪ Two subparts: ▪ Head ▪ Enclosed within and ▪ Within the head, more tags can be used to specify title of the page, meta- information, etc. ▪ Body ▪ Enclosed within and ▪ Within the body, content is to be displayed ▪ Other tags can be embedded in the body Elements, Attributes and Tags

Elements - Elements are used denote specific composition for document. ▪ E.g. – header, title, paragraph etc. ▪ These elements must be denoted in the script using tags. Elements, Attributes and Tags

Tags – Tag is a markup to represent and element. HTML tags consists of left angle bracket (<), element name, and a right angle bracket(>) ▪ The text between the start and end tags is the element content ▪ E.g.

, , <p> etc. ▪ Tags must close. To do so we incorporate a slash (/). ▪ So the complete tag would be - <title> This is our title Elements, Attributes and Tags

Attributes – They are assigned to different elements to enhance the web page. ▪ Added attributes go inside the brackets of the opening tag ▪ Attributes always come in name/value pairs like: name=“value” ▪ Attributes are always specified in the start tag ▪ E.g.

-- here align attribute associated with element p which stands for paragraph will align any content in the center. Elements, Attributes and Tags

▪ Any HTML Document should contain certain tags – ▪ ▪ ▪ <body> ▪ <p> -- for paragraph And many more.. Composing A Web Page Using Tags</p><p>▪ Parts of the page – ▪ <!doctype html> -- tells the browser to prepare to process HTML. ▪ <html> -- encloses all HTML on a page. ▪ <title> -- establishes the title of the page ▪ <header> -- holds the page introductory information ▪ <body> -- contains the content of the page ▪ <footer> -- contains the footer of the page Adding an Image</p><p>▪ The <img> tag will allow us to insert an image on to the webpage. ▪ src attribute will allow the <img> tag to get the image from an image source. ▪ will load image stored at that path. ▪ E.g. This will load sample.jpeg image from images folder into our webpage. Introduction to CSS</p><p>Cascading Style Sheets (CSS) are a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects like SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. CSS is one of the core languages of the open web and has a standardized W3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 is a recommendation, and CSS3, now split into smaller modules, is progressing on the standardization track. CSS : Change the Look with a Style Sheet</p><p>Try this <!DOCTYPE html> <head> <title>My styled page

Greetings and welcome!

CSS : Change the Look with a Style Sheet

▪ Controls format:

▪ Font, color, spacing

▪ Alignment

▪ User override of styles CSS : Change the Look with a Style Sheet

▪ Font –

▪ fontfamily - CSS property used to specify a prioritized list of names

and/or generic family names for the selected element.

▪ fontweight - CSS property that specifies the weight or boldness of the font.

▪ fontsize - CSS property for the size of the font, in pixels or ems.

▪ textdecoration - CSS property that sets the text formatting to underline, overline,

line-through or blink. Looking Forward

We’ll be learning about marking up text in the next session. We’ll look at – ▪ Paragraphs ▪ Headings ▪ Lists ▪ More Content Elements ▪ Organizing Page Content ▪ The Inline Element Roundup ▪ Generic Elements () ▪ Some Special Characters Thank You.

By High School Technology Services myhsts.org