Download presentation
Presentation is loading. Please wait.
1
Understand basic HTML and CSS terminology, concepts, and basic operations.
Objective 3.01
2
What is needed to design a web page?
A computer, an internet connection, a web browser (Internet Explorer, Mozilla, etc.), a web hosting space, a domain name, and a simple text editor software program (Notepad), are all needed to design and view a web page.
3
What is needed to design a web page?
Internet Service Provider is an organization that provides services for accessing, using, or participating on the Internet. Web browser is application software used to access and view websites.
4
What is needed to design a web page?
Web hosting is the service that makes a website available to be viewed on the Internet. Domain name a unique name that identifies a web address. The domain name appears in the address bar with a prefix of “www” and suffix such as “.com, .edu, .org, .net,”.
5
What is needed to design a web page?
Text Editor Software is a program that allows you to open, view, and edit plain text files. Unlike word processors, text editors do not add formatting to text. This application software allows the creation of simple HTML webpage design.
6
What is HTML? HTML stands for HyperText Markup Language.
HTML is the set of markup symbols or codes used to create and establish a webpage's structure.
7
What is the structure of HTML documents?
Doctype declaration is the first line of an HTML page. Example: <!DOCTYPE html> The Doctype declaration is not an HTML tag but rather instructions that lets the web browser know what HTML version the page is written in.
8
What is the structure of HTML documents?
Elements are descriptions of each piece of content on a web page so that the web browser knows how to display it. Tags are the codes that describe how a Web page is formatted. Tags are keywords surrounded by angle brackets or the less (<) and greater than (>) symbols.
9
Example: Opening and Closing Paired Tags
What is the structure of HTML documents? HTML Tags are normally paired. Opening Tags mark the beginning of an element. It consists of a less-than sign followed by an element’s name, and then ends with a greater- than sign; for example, <div>. Closing tags marks the end of an element. It consists of a less-than sign followed by a forward slash and the element’s name, and then ends with a greater-than sign; for example, </div>. Example: Opening and Closing Paired Tags <p>Learn to HTML</p> Opening Closing
10
What is the structure of HTML documents?
Start Tag is the first line after the doctype declaration. It tells the web browser where to start and where to stop. Example: <html>, </html> Head elements contains information about the document that is not displayed on the webpage. Example: <head>, </head> Title tags tell the browser what to display as the page title at the top and tells search engines what the title of the site is. Example: <title>, </title>
11
What is the structure of HTML documents?
The Body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. The body tag is required and it should be used once. It should start immediately after the closing head tag and end directly before the closing html tag. Example: <body>, </body> Heading elements allows the use of six levels of document headings, ranging from largest to smallest, breaking up the document into logical sections. Example: <h1>, <h2>, <h3>
12
What is the structure of HTML documents?
Link elements are used to connect your document to a related resource. Links have an opening tag of <a> and a closing tag of </a>. Hyperlinks are texts or images you can click on that will take you to another document or page. Hypertext Reference (href) is the code used to create a link to another page. It specifies the link’s destination. Attributes are used to provide additional information about an element.
13
What is the structure of HTML documents?
14
What is the structure of HTML documents?
CSS (Cascading Style Sheets) describes how HTML elements are to be displayed on screen; controls the design and layout of the page. A style sheet is a file that describes how an HTML file should look. Style sheets are cascading because the sheets can apply formatting when more than one style applies.
15
What is the relationship between HTML & CSS?
HTML and CSS are two different types of markup code, which have their own unique syntax (the arrangement in which code is written). The distinction between the two: HTML is the structure for the page, while CSS gives the HTML its styling: HTML = Structure CSS = Style
16
How can CSS be used to enhance a web page?
As elements are added to a web page they are styled using CSS. HTML has tags and CSS has Selectors. Selectors designate which element or elements within HTML to target and apply styles (such as color, size, and position) to. For each selector there are properties inside curly brackets. Properties determine the styles that will be applied to a designated element. Values are given to properties following a colon. Values determine the behavior of a property.
17
How can CSS be used to enhance a web page?
Example: Selector body { font-size: 14px; color: navy; } properties Value
Similar presentations
