المحاضرة الأولى
advertisement
HTML Design and Build websites by using HTML - Lecture One T.A. Reem Alshnaifi 1-Jul-16 HTML REFERENCES HTML and CSS: Design and Build Websites To download a pdf file of the book: http://filepost.com/files/64a66495/HTML_and_CSS.pdf/ To download all of the code for this book online: http://www.htmlandcssbook.com/code/ HTML REFERENCES useful website HTML Contents: Software that we need to learn HTML HTML Editors HTML Introduction The HTML Basic Elements & tags Create your first web page with Notepad. HTML Heading HTML Paragraphs HTML Line Breaks Insert comments in the HTML source code Insert horizontal lines Create and View HTML Document Software that you need to create and view an HTML document : • web browser(such as Firefox, Internet Explorer, Safari and Chrome) • text editor (such as Notepad, which comes with Windows, or TextEdit , which comes with Macs) HTML Editors HTML can be edited by using a professional HTML editor like: • Adobe Dreamweaver • Microsoft Expression Web • CoffeeCup HTML Editor HTML Introduction <!DOCTYPE html> <html> <body> <h1>This is heading1</h1> </body> </html> Simple Code Note : the HTML code is in blue, and the text you see on screen is in black. HTML Introduction HTML documents are defined by HTML elements which is everything from the start tag to the end tag Tags Elements are usually made up of two tags: an opening tag and a closing tag. (The closing tag has an extra forward slash in it.) Each HTML element tells the browser something about the information that sits between its opening and closing tags. A Closer Look at Tags A Closer Look at Tags The HTML Basic Elements & tags HTML ,Body, Head & Title <!DOCTYPE html> <html> <head> <title>This is the Title of the Page</title> </head> <body> <h1>This is the Body of the Page</h1> <p>Anything within the body of a web page is displayed in the main browser window.</p> </body> </html> HTML Result Anything written between the <title> tags will appear in the title bar (or tabs) at the top of the browser window Anything written between the <body> tags will appear in the main browser window Create your first web page with Notepad. Step 1: Start Notepad To start Notepad go to: Start All Programs Accessories Notepad Step 2: Edit Your HTML with Notepad Type your HTML code into your Notepad: <!DOCTYPE html> <html> <body> <h1> My first heading </h1> </body> </html> Create your first web page with Notepad. Step3:Save the file as filename.html on a PC. This is called the Document Source. Step 4: Run the HTML in Your Browser Start your web browser and open your html file from the File, Open menu, or just double-click your HTML file. Your HTML page should now appear just like any other Web page in your browser. HTML Heading HTML headings are defined with the <h1> to <h6> tags Example <!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> HTML Paragraphs HTML paragraphs are defined with the <p> tag. Example <!DOCTYPE html> <html> <body> <p>paragraph consists of one or more sentences that form a self-contained unit of discourse. </p> <p>Text is easier to understand when it is split up into units of text.</p> </body> </html> Note: Browsers automatically add an empty line before and after a paragraph. HTML Line Breaks Use the <br> tag if you want a line break (a new line) without starting a new paragraph: <!DOCTYPE html> <html> <body> <p>This is<br>a paragraph <br>with line breaks</p> </body> </html> Example Insert comments in the HTML source code Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed Example <!DOCTYPE html> <html> <body> <!--This comment will not be displayed--> <p>This is a regular paragraph</p> </body> </html> Insert horizontal lines <!DOCTYPE html> Example <html> <body> <p>The hr tag defines a horizontal rule:</p> <hr> <p>This is a paragraph.</p> <hr size="6" width="50%" align="center" color="red"> <p>This is a paragraph.</p> </body> </html>
