HTML And the Internet
HTML and the Internet ► HTML: HyperText Markup Language Language in which all pages on the web are written Not Really a Programming Language Formatting Language 4 Design Features of HTML ► Text Formatting – Some of the same features as word processing Type, Size, Style, Alignment ► Hyperlinks – URL’s that are coded into HTML doc. Click link Opens Target URL – Uniform Resource Locator (Web Site Address) ► Tables and Lists – Tables can be used to present information or format pages. Formatting of tables includes size, borders, and background colors. Bullet or Number Lists can also be created. ► Graphics, sound, and video support – Good web pages have a balance of graphics and text content. HTML allows you to easily add graphics and control appearance. HTML documents or HTML Files ► Simple Text file with.html extension. ► Contains HTML instructions How it works ► Surround each page element (headings, text for a table, etc…) with a pair of TAGS
HTML and the Internet ► TAGS – HTML Instruction made of tag pairs 1 st tag indicates beginning of feature 2 nd tag marks location in document where feature ends Not case sensitive but be consistent This is an example of a header tag This is an example of a header tag HTML includes hundreds of tags that allow you to describe page elements. Planning an HTML Document Sketch your web page – create a sketch of what your page will look like Enter Structure Tags – tags to create html doc and main sections Enter Web Page Elements Along with Formatting Tags Preview the web page Test Links
HTML and the Internet ► Writing Your First HTML Document Open Notepad Click File Save (save document as docName.html) Create an tag pair ► Tags identify the text document as HTML to the browser. Use formatting to make your HTML doc easy to read. <HTML><HEAD> MY WEBSITE MY WEBSITE </HEAD><BODY> Welcome to my website Mr. Santos </BODY></HTML> … - Identifies the file as HTML to the browser … - Place where you can code info about the document, including it’s title. … - Formats the document title, which appears in browser’s title bar. … - Contains the web page contents that appear in the browser window.
Document Types HTML 4.01 Strict, Transitional, Frameset ► ► XHTML 1.0 Strict, Transitional, Frameset ► ►
HTML Tags ► Text Formatting Tags - Adds a Line Break. Does NOT require a closing tag. … - Adds a blank line before and after the current paragraph. No Closing Tag. … - Heading Tag H1 – Largest heading … … … - Heading Tag H6 – Smallest heading. Create a website layout ► Should contain all structure tags. (DOCTYPE, HTML, HEAD, BODY) ► Should contain a Title tag that describes the page ► Body should contain at least one H1 Tag and one other Heading Tag ► Body should also contain some paragraph text and should use the tag and the tag.
HTML Tags ► Recreate the text below as a webpage Touchstone Booksellers Specializing in nonfiction of all types a locally-owned, independent bookstore since 1948 Search our stock Place an order Out-of-print searches Events calendar
HTML Tags ► Hyperlinks - Defining Feature of HTML ► The ability to move from one web page to another using links. Hyperlinks create the web. Hyperlink or Link – specially formatted web object that user can click to open a different web page, known as the target Target is often located in the same group of pages (or Web Site) Web Site – Group of related web pages Hyperlinks use the … Tag … - anchor tag Attribute – Settings available in most tags that allow you to modify default features. HREF – Attribute Used to define the location of a hyperlink reference. Placeholder – simple document containing text explaining that a page is not yet complete. Syntax - my second page Syntax - my second page HREF options ► – opens a file located on network or internet. ► Filename – opens a file located in the same folder as the current file. ► mailto: address – Creates a new outgoing message in default mail program, using given address. mailto: mailto: Edit website layout ► Add 4 links to other pages within your site and a contact link that sends you an . ► Create a construction.html placeholder for your site. ► View your site in the browser. ► Test your links and make sure they work.