Introduction to web design lectures understanding

This preview shows page 4 - 9 out of 15 pages.

INTRODUCTION TO WEB DESIGN - lectures UNDERSTANDING STRUCTURE Example structure of a story in a newspaper: - headline, - some text, - (possible) some images, - subheadings (for large stories) that split the story into separate sec<ons Structure helps readers understand the stories in the newspaper. The structure is very similar when a news story is viewed online.
Image of page 4

Subscribe to view the full document.

3/7/19 5 INTRODUCTION TO WEB DESIGN - lectures UNDERSTANDING STRUCTURE Example structure of an insurance form: - headings for different sections, - each section contains a list of questions with areas for you to fill in details or checkboxes to tick Again, the structure is very similar online. INTRODUCTION TO WEB DESIGN - lectures STRUCTURING WORD DOCUMENTS The use of headings and sub-headings in any document often reflects a hierarchy of information - For example, a document might start with a large heading, followed by an introduction or the most important information. This might be expanded upon under subheadings lower down on the page. When using a word processor to create a document, we separate out the text to give it structure. - each topic might have a new paragraph, - each section can have a heading to describe what it covers.
Image of page 5
3/7/19 6 INTRODUCTION TO WEB DESIGN - lectures STRUCTURING WORD DOCUMENTS Text editing tools, like Microsoft Word provide rich set of toolbars and pallets to apply style into word documents. INTRODUCTION TO WEB DESIGN - lectures STRUCTURING WEB PAGES We use structure in the same way when writing web pages BUT, HOW IS THIS DONE?
Image of page 6

Subscribe to view the full document.

3/7/19 7 INTRODUCTION TO WEB DESIGN - lectures STRUCTURING WEB PAGES To describe the structure of a web page, we add code to the words we want to appear on the page - Text being displayed on the screen is shown in black - HTML code is displayed in blue <html> <body> <h1> This is the Main Heading </h1> <p> This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub- headings. </p> <h2> This is a Sub-Heading </h2> <p> Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub- headings (or lower-level headings). </p> <h2> Another Sub-Heading </h2> <p> Here you can see another sub-heading . </p> </body> </html> INTRODUCTION TO WEB DESIGN - lectures HTML ELEMENTS The HTML code is made up of characters placed inside angled brackets - these are called HTML elements 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 HTML USES ELEMENTS TO DESCRIBE THE STRUCTURE OF PAGES! Tags act like containers. They tell you something about the information that lies between their opening and closing tags.
Image of page 7
3/7/19 8 INTRODUCTION TO WEB DESIGN - lectures HTML ELEMENTS The opening <html> tag indicates that anything between it and a closing </html> tag is HTML code.
Image of page 8

Subscribe to view the full document.

Image of page 9
  • Spring '18
  • Suzana

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern