GET the 65$ only sign in Only using this link:
https://www.bluehost.com/track/bhaiyaji/
Fundamentals of HTML, XHTML, and CSS
Starting up You will work with several files from the web04lessons folder in this lesson. Make sure you have loaded the web lessons folder onto your hard-drive from www.digitalclassroombooks.com/webdesign. See “Loading lesson files” in the Starting Up section of this book.Web languages
In this lesson, you will discover two languages: HTML and CSS. Although they have different syntax and rules, they are highly dependent on each other. By the end of this lesson, you will understand how to create simple HTML pages, add images, create hyperlinks from one page to another, and add simple styling to pages using CSS. This lesson covers a lot of ground, and many of the core principles introduced in this lesson are reinforced throughout the remaining chapters.Web page structure is based on HTML
Hypertext Markup Language (HTML) documents use the .html or .htm extension. This extension allows a web browser or device such as a smartphone to understand that HTML content is on the page, and the content of the page is then rendered by the browser or device according to the rules of HTML. \Markup tags are used to define the content on an HTML page. Markup tags are contained between greater than (<) and less than (>) symbols, and they are placed at the start and end of an object or text that is used in an HTML page. \
Here is an example of two heading 1 tags for text. The tags are not seen by the viewer of the web page, but every web browser knows that the text between the tags is a heading 1. <h1>New Smoothie Recipe!</h1> In this example, the <h1> is the opening tag and the </h1> is the closing tag. So this entire line of code is an element. More specifically, it is referred to as the heading 1 element. HTML and XHTML are closely related. There is a list of rules defined by the World Wide Web Consortium, or W3C that specify the perimeters of HTML and XHTML.BEST PRINTER FOREVER AND SAVE YOUR
2000 RS BUY IT FROM LINK ONLY THEN ONLY YOU GET OFFER:
https://amzn.to/2ScSJOF
The details of XHTML syntax
There is little fundamental difference between HTML 4.0 and XHTML 1.0 — the two standards previously released by the W3C (World Wide Web Consortium). As XHTML was defined, it was created so that pages written in XHTML also work in browsers that render current HTML. The tags and attributes of XHTML and HTML remained the same, but the syntax of XHTML code is more strict. The most significant differences between XHTML and HTML are as follows:
• In XHTML, all tags must be lowercase.
• XHTML requires all tags to be closed — meaning that there must be a tag at the start and end of the element being tagged — such as a headline, paragraph, or image.
Doctype lets the web browser know what to expect
The start of every web page should include a Doctype declaration, telling the Doctype declaration tells the web browser a little bit of information about what it is going to see on the page. Because there are different specifications for XHTML and HTML the web browser knows which language it’s about to see and render. Because a browser renders the page starting at the top line and then moves down, placing your doctype on the first line makes a lot of sense. While it’s not required, it’s good form to always use Doctype at the start of your HTML pages. The doctype for HTML 4.0.1 looks like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> When a web browser sees a doctype declaration, the browser expects that everything on the page that follows will use that language. If the page adheres to the specifications perfectly, it is considered valid.
The W3C and page validation
You may recall from Lesson 2 that the W3C is the World Wide Web consortium — a nonprofit t group that helps guide the evolution of the web. The W3C provides guidelines and rules for specifications including HTML and XHTML. One way to determine the validity of the HTML or XHTML code you generate is to use W3C’s free online validation service.
HTML structure
One of the most important concepts to understand when designing web content is the nested structure of HTML documents. Elements are often nested within each other. You will often start with the HTML structure first and then begin to style it with CSS.
As an example, let’s look at the basic elements that are in virtually every web page:
<html>
<body>
</body>
</html>
In this example, the <body> element is nested within the <html> element. In other words, <body> is placed between the opening <html> tag and the closing </html> tag, so nested tags are those that are placed between other opening and closing tags. These two elements <body> and <html> form the structure of all web pages; when a browser opens an HTML document, it looks for this structure. Content within the body tag is visible on the page as it is displayed within the web browser.
<html>
<body>
Nobody knows who invented smoothies, but the world wouldn’t be the same without them! </body> </html>
In HTML documents, some of the content is displayed to the viewer in their browser, but there is also another code on the page that is hidden from view, but useful for the browser, search engine, or site developer. Examples of this hidden code include scripts to add interactivity, code to help search engines categorize the document and the styles that define the appearance of the page. This code is often found inside of the <head> element, and the <head> element is nested within the <html> tags.
The paragraph element is now nested within the <body> element, which, in turn, is now nested within the <html> element. You will now open this document in a text editor and add to the file:
1 Choose File > Open and navigate to your web04lessons folder. Depending on which text editor you are using, you may need to select “All Files” instead of “Text Documents” in order to see the file. Choose the index.html file and then click Open. To get a better understanding of the structure of HTML and nesting of tags, you will add a hyperlink to this document linking the word SmoothieWorld to an external website.
2 In the last paragraph that reads “All content on this site is the copyright of SmoothieWorld,” click once before the word SmoothieWorld and then type the following code: <a>. This <a> is the opening for the anchor element, which you use to link to other pages in your site or elsewhere on the Internet.
The role of CSS
Cascading Style Sheets (CSS) use a separate language from HTML. CSS allows you to apply consistent styling of elements across all pages on your site, so that all headings, lists, and paragraphs look and act the same on every page of a site.
Three ways to use styles
In this exercise, your styles were located within the head section of the page. This type of style is called an internal style sheet. In addition to internal (or embedded) style sheets, there are external style sheets and inline styles. An external style sheet is a separate document with the file extension .css. When using an external style sheet, all styles reside inside the style sheet document and you link it to your HTML pages. While internal style sheets affect only the page on which they exist, external styles can be applied to multiple pages. Inline-styles are used infrequently. With inline styles, the style rules are nested inside the HTML tags. An example of an inline style that colors a heading purple would look like this:
<h1 style="color:purple">Smoothies</h1> Inline-styles are powerful because they override both internal and external styles, although they only apply to a single tag at a time. This embedded nature of inline styles means they are not easily re-used. In the simple example illustrated above, you can see the style for the color purple is nested inside the <h1> tag.If you had 50 <h1> elements throughout your website and were using inline styles, you would add this style code 50 times. If you decided to change the color to green, you would need to locate and modify all 50 uses of the style. Inline-styles are useful for single overrides or when an internal or external style sheet may not be available; a good example of this is HTML-based e-mail.
You will not be using inline styles very often in this book, which is a reflection of the current state of web design. Working with a combination of internal and external styles is the most common practice of web designers today.
Internal versus external style sheets
Internal style sheets are CSS rules contained directly within a document, using the <style> tag. The entire style sheet is contained within the opening and closing <style> tags. External style sheets are CSS rules saved in a separate document with the file extension .css. With internal style sheets, CSS rules apply only to the HTML in the current document. For example, if you had a 20-page website and were using internal style sheets, you would need to create a separate style sheet in each of the pages. A change to the style would require you to update the internal styles in each of the 20 separate pages. External style sheets place all the CSS rules for a site in a single document. You can attach the .css file to an unlimited number of HTML pages. This provides more flexibility. If a style rule is changed in the external style sheet, all paragraphs across the site are modified with a single step. You will make an external style sheet and then attach it to a new HTML page.
Creating an external style sheet An HTML page does not have to be limited to just one style sheet, and many large websites will break-up their styles into separate pages, making them easier to organize and maintain. You can even use style sheets for specific functions such as printing a page or for displaying a site on mobile devices, you will see that specific style sheets can even be used to make sites compatible with older web browsers when they are used to visit sites you create.
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
0 Comments:
Post a Comment
Please do not add any spam link in comment box.