1 / 19

Web Design and Programming Basics: Lecture 1

Learn about Hypertext Markup Language (HTML), the essential markup language for creating web pages. Follow step-by-step instructions on writing and saving HTML files using Notepad, and understand HTML elements, attributes, and document structure.

amarietta
Download Presentation

Web Design and Programming Basics: Lecture 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web design and programmingHTML BasicsLecture 1م. سندس العزاويالمرحلة الثالثة / مسائي

  2. Hypertext Markup Language • Markup language: • Embedded codes in documents • Codes are called `tags’ • Codes • Describe the structure documents • Include instructions for processing • Computer language for describing syntax of tags • HTML: • make for publishing hypertext on the World Wide Web • Allow to embed other scripting languages to manipulate design layout, text and graphics • Platform independent

  3. Web Page Development Cycle EDIT and SAVE the file in your AFS p:\web\index.html TEST by BROWSING to the page http://www.msu.edu/~msunetid/index.html

  4. Write HTML Using Notepad Step 1: Open Notepad • Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad. • Windows 7 or earlier: Open Start >Programs >Accessories >Notepad • Step 1: Open TextEdit (Mac) Open Finder > Applications > TextEdit In Preferences > Format > choose"Plain Text"

  5. Write HTML Using Notepad • Step 2: Write Some HTML • Write HTML into Notepad.

  6. HTML File • Step 3: Save the HTML Page

  7. HTML File • Step 4: View the HTML Page in Your Browser • Open the saved HTML file in your favorite browser

  8. Tags An HTML element starts and ends with tags—the opening tag and the closing tag. 1. Tag consists of an opening angled bracket (<), some text, and a closing bracket (>). 2. Inside a tag, there is a tag name; there may also be one or more attributes • Tags <html><body> <head>….etc

  9. Attribute • Each attribute is made up of a name and a value, name="value“

  10. HTML Basics 3 Parts to HTML document • DOCTYPE • What DTD are you using • Head • Meta information • Only <title> is required • Body • Text to render

  11. HTML File Structure <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

  12. HTML Elements There are two major sections inside the html element: the head and the body. HTML Elements Body Element Head Element Title Element Meta Element Link Paragraphs Images Table, frame, form, etc…. CSS markup Java Script

  13. Head element Head element contains information about the page, but no information that will be displayed on the page itself. The opening<head> and closing tags </head> Title element tells the browser what to display in its title bar (the title bar is the very top part of the browser window) The opening<title> and closing tags </title> Meta element can be used in a web page for different reasons. Some are used to provide additional information that’s not displayed on screen to the browser or search engines for example: <meta charset="utf-8"/>

  14. Structural Tags <HTML> These tags enclose the entire Web page document. </HTML> <HEAD> These tags enclose the Head part of the document </HEAD> <TITLE>These tags enclose the title of the document. This text appears in the title bar in the browser and on the bookmark list if someone bookmarks your web page. </TITLE>

  15. Example1 <head> <title>Computer Sciences </title> <meta charset="utf-8"/> </head>

  16. Header Tags Header Tags -- Used for marking sections and subsections in a document. <H1>Header 1 -- Giant-sized and bold </H1> <H2>Header 2 -- Large and bold </H2> <H3>Header 3 -- Normal-sized and bold </H3> <H4>Header 4 -- Small and bold </H4> <H5>Header 5 -- Very Small and bold </H5> <H6>Header 6 -- Tiny and bold </H6>

  17. H1 = Giant-sized and bold H2 = Large and bold H3 = Normal-sized and bold H4 = Small and bold H5 = Very Small and bold H6 = Tiny and bold

  18. Body element Body element contains almost everything that you see on the screen: headings, paragraphs, images, any navigation that’s required, and footers that sit at the bottom of the web page

  19. Example2 <HTML> <HEAD> <TITLE> My First home page </TITLE> </HEAD> <BODY> My name is your name. My major is your major. </BODY> </HTML>

More Related