web development immersive html & web fundamentals
TRANSCRIPT
![Page 1: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/1.jpg)
WEB DEVELOpment ImmersiVEHTML & Web Fundamentals
![Page 2: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/2.jpg)
2
• How the Web Works• The Development Process• Separation of Concerns• Work Flow Habits• Getting to know HTML elements• Validation
Topics
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 3: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/3.jpg)
3
• Request/Response• Rendering in the browser• Local / Remote• Frontend / Backend Development
How the web works
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 4: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/4.jpg)
4
Request / response
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 5: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/5.jpg)
5
Conversation: passing html, css, & js
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 6: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/6.jpg)
6
Rendering in the browser
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
• Each browser has its own rendering engine to interpret and display the markup
![Page 7: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/7.jpg)
7
Rendering in the browser
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
• Top to bottom, left to right
![Page 8: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/8.jpg)
8
Local / remote
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 9: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/9.jpg)
9
FTP (File transfer protocol)
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
Things you will need to connect:•Ftp Address•User login•Password
Should be provided by your host company or server admin.
![Page 10: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/10.jpg)
10
Front end (client-side)•HTML•CSS•Javascript
DEVelopment
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
Back end(server-side)•Ruby•PHP•Python•PERL•C++•Node.js
![Page 11: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/11.jpg)
11 GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
DEVelopment PROCESS
• Work Cycle• Planning• Stages
![Page 12: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/12.jpg)
12
A Typical Web Development Cycle
User-Experience (UX)
Information Architecture (IA)
Design Development
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 13: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/13.jpg)
13
• Who is our target audience? • How do we know if the user is hitting their
goals?• What are the most important features of this
site?
1 UX
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 14: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/14.jpg)
14
Business Needs
User Needs
Best Practices
1 UX
Ideal Experience
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 15: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/15.jpg)
15
Resulting in deliverables such:• wireframes• flow diagrams• sitemap
2 IA A model or blueprint for the site
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 16: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/16.jpg)
16
2 IA : The Blueprint
Sitemaps & Flow Diagrams
Wireframes & Content
Establish flow and order
Define the user interaction and ease the handoff process to the creative team
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 17: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/17.jpg)
17
Small Site
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 18: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/18.jpg)
18
Large Site
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 19: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/19.jpg)
19
Hand drawn
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 20: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/20.jpg)
20
Brainstorming
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 21: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/21.jpg)
21
Functional
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 22: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/22.jpg)
22
Minimal
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 23: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/23.jpg)
23
iPhone
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 24: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/24.jpg)
24
Design 3Wireframes become design comps
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 25: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/25.jpg)
25
Design 3Each wireframe template, becomes a comp template
Homepage 2 column top1 column bottom
2 column top2 column bottom
Blog
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 26: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/26.jpg)
26
4
general-assembly-logo.png
Comps become graphics & real text
General Assembly offers classes, and events at the intersection of technology, design, and entrepreneurship. Together with our members, thought leaders, and seasoned practitioners, we offer a robust curriculum focused on
Real Text:
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
FRONT END DEVELOPMENT
![Page 27: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/27.jpg)
27
5Interacts with database and executes commands acting as a controller that mediates between the database model and the front end users view.
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
If we go to www.zappos.com and search for a pair of shoes, the visual display of the images, the price and the green button "Add To Cart" is all part of the front-end. Now, when I click "Add To Cart" and this an item is moved to my shopping cart in the backend there is some logic written that says something like: "The user just clicked a button, so add this item temporarily to the database and remember this item for the user." The backend takes care of the actions and the directions of how and where to store data.
back END DEVELOPMENT
![Page 28: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/28.jpg)
28
• HTML = structure (content)• CSS = style• Javascript = behavior
Separation of concerns
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 29: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/29.jpg)
29
Site organization
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 30: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/30.jpg)
30
• Syntax• Document Structure• Content Tags• Element Display
HTML basics
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 31: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/31.jpg)
31
syntax
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 32: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/32.jpg)
32
syntax
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 33: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/33.jpg)
33
<html> <head>
Document metadata
</head> <body>
Document contents
</body></html>
Basic Document structure
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 34: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/34.jpg)
34
Heading Elements
<h1>Largest Heading</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>Smallest Heading</h6>
Content tags
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 35: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/35.jpg)
35
Text Elements<p>This is a paragraph</p><br> (line break)<hr> (horizontal rule)<pre>This text is preformatted</pre>
Content tags
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 36: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/36.jpg)
36
Text ElementsLogical Styles
<em>This text is emphasized</em><strong>This text is strong</strong><code>This is some computer code</code>
Content tags
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 37: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/37.jpg)
37
<b>bold</b><i>italic</i><u>underline</u><s>strike through</s><menu>creates a menu</menu><center>centers content</center><applet>creates an applet</applet><font>font style</font>
Deprecated tags
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 38: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/38.jpg)
38
Unordered list
<ul> <li>First item</li> <li>Next item</li></ul>
Content tags
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 39: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/39.jpg)
39
Ordered list
<ol> <li>First item</li> <li>Next item</li></ol>
Content tags
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 40: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/40.jpg)
40
Definition list
<dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd></dl>
Content tags
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 41: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/41.jpg)
41
• File Types• Resolution & Color Mode• Compression• Attributes
IMages
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 42: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/42.jpg)
42
• GIF (Graphics Interchange Format)• JPG (JPEG) (Joint Photographic
Experts Group)• PNG (Portable Network Graphic)• BMP (Bitmap)• SVG (Scalable Vector Graphic)
Common File types
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 43: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/43.jpg)
43
• Lossless data compression makes use of data compression algorithms that allows the exact original data to be reconstructed from the compressed data
• Lossy data compression does not allow the exact original data to be reconstructed from the compressed data.
Lossy vs lossless
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 44: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/44.jpg)
44
• Lossless compression that simplifies color pallette to reduce file size.
• Best for sharp edged graphics with smaller range of colors. (ex: text, simple logos, and icons)
• Not good for complex gradients or millions of colors (ex: photos)
GIF (graphic interchange format)
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 45: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/45.jpg)
45
• Lossy compression that reduces file size by loss in image fidelity.
• Best for photographs and paintings of realistic scenes with smooth variations of tone and many colors.
• Not as sharp at depicting text, and icons as GIF or PNG.
JPG (joint photographic experts group)
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 46: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/46.jpg)
46
• Lossless data compression that was meant to replace GIF.
• PNG-8 works well with text, icons, and logos with sharp edges and simplified color palettes.
• Creates much larger file sizes on photos than JPGs.
PNG-8 (portable network graphic 8 bit)
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 47: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/47.jpg)
47
• A higher 24 bit version of PNG.• Excellent results for images with
transparency, which makes it work well for UI buttons. Good at both sharp edged simplified palettes and large color range gradients.
• Will create a larger file size than JPG for photos however.
PNG-24 (portable network graphic 24 bit)
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 48: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/48.jpg)
48
• Left over from the days of oldver vesions os OS2 and Windows, Bitmaps for web use dithering, pattern or noise inclusion to reduce file size.
• Good for making retro web 1.0 graphics.
• Not ideal for maintaining clarity in web images at reasonable file sizes.
Bmp (bitmap)
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 49: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/49.jpg)
49
• Lossless format that can optionally be defined as vector points instead of pixels allowing scaling.
• Good for scalable graphics.• Has limited support in older versions
of Internet Explorer 8 and below.
svg (scalable vector graphic)
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 50: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/50.jpg)
50
There are only 72 pixels per inch on your screen.
•Web = 71 dpi (ppi)•Print Newspaper = 100 dpi (ppi)•Print Magazine = 300 dpi (ppi)
CHOOSING image RESOLUTION
GENERAL ASSEMBLY[DATE OF LECTURE]
[NAME OF PROGRAM]CERTIFICATE PROGRAM
![Page 51: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/51.jpg)
51
Our screens display colors in RGB.
•Web = RGB (Red, Green, Blue)•Print = CMYK (Cyan, Magenta, Yellow, Black)
CHOOSING color modes
GENERAL ASSEMBLY[DATE OF LECTURE]
[NAME OF PROGRAM]CERTIFICATE PROGRAM
![Page 52: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/52.jpg)
52
<img src=”myimage.jpg" alt="Alternate Text" title=”Display Title” width=”800" height=”600" />
Image TAg
GENERAL ASSEMBLY[DATE OF LECTURE]
[NAME OF PROGRAM]CERTIFICATE PROGRAM
![Page 53: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/53.jpg)
53
• Attributes (href, target)• Relative vs Absolute• Types (url, named anchor, mailto)
LINKS
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 54: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/54.jpg)
54
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"> <img src="URL" alt="Alternate Text"></a>
<a href="mailto:[email protected]">Send e-mail</a>
A named anchor:<p id="tips">Useful Tips Section</p><a href="#tips">Jump to the Useful Tips Section</a>
LINK TagS
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 55: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/55.jpg)
55
<a href="http://www.example.com/">This is an absolute url Link</a>
VS
<a href=”about.html">This is a relative url Link</a>
Relative urls, link to content inside the same site and provides a file path relative to the relationship between the two files. Whether internal to the site or on an external domain, absolute urls provide the full http url in the file path.
Relative vs absolute
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 56: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/56.jpg)
56
Element display
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 57: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/57.jpg)
57
• Keywords• Descriptions• OGP (open graph protocol)
Meta data
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 58: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/58.jpg)
58
Comma seprated list of terms to improve search engine optomization.
<meta name="keywords" content="wikipedia,encyclopedia" />
keywords
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 59: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/59.jpg)
59
Paragraph description of your site page. Google displays first 69 characters of the description in the search results under the site title and url.
<meta name="description" content="…" />
description
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 60: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/60.jpg)
60
Enables any web page to become a rich object in a social graph.
<meta property="og:title" content="Blue Valentine"/><meta property="og:type" content="movie"/><meta property="og:url" content="http://www.bluevalentine-movie.com/"/><meta property="og:image" content="/images/facebook-thumb.jpg"/>
http://ogp.me/
OGP (Open Graph Protocol)
GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT
![Page 61: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/61.jpg)
61
W3c validation
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
http://validator.w3.org/
![Page 62: WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS](https://reader036.vdocument.in/reader036/viewer/2022062308/56649e145503460f94afe6df/html5/thumbnails/62.jpg)
62 GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT