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 ▪ Document Object Model (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 .html and .css 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 TagsElements - 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. etc. ▪ Tags must close. To do so we incorporate a slash (/). ▪ So the complete tag would be -
Attributes – They are assigned to different elements to enhance the web page. ▪ Added attributes go inside the brackets of the opening tag
-- 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 – ▪ ▪
-- for paragraph And many more.. Composing A Web Page Using Tags
▪ Parts of the page – ▪ -- tells the browser to prepare to process HTML. ▪ -- encloses all HTML on a page. ▪