Transcription
CS202 - Fundamentals of Front End DevelopmentFront-end development, also known as client-side development is the practice of producing HTML, CSSand JavaScript for a website or web application so that a user can see and interact with them directly.Front End Languages“Front end languages” lives in your browser. HTMLCSSJavaScriptFront End DevelopmentFront end web development is NOT design. The front end developer stands between the designeron one end and the back end developer on the other.As a Front end developer you have to: Make sure the content is presented as desire.All user interactions are handled.02- URL: Uniform Resource LocatorURL stands for Uniform Resource Locator. It is the global address of documents and other resources onthe World Wide Web. A URL is one type of Uniform Resource Identifier (URI).Uniform Resource Identifier (URI)Is the generic term for all types of names and addresses that refer to objects on the World WideWeb.The term "Web address" is a synonym for a URL that uses the HTTP or HTTPS protocol. Hereare few examples: ain.com/resource3.html Parts of a URLhttp://mydomain.com/myresource.htmlThe first part of the URL is called a protocol identifier and it indicates what protocol touse.http://mydomain.com/myresource.htmlThe second part is called a resource location name and it specifies the IP address or thedomain name where the resource is located.
http://mydomain.com/myresource.htmlThe third part is optional; it’s the resource name, typically a file name on server.Dynamic URLA dynamic URL is the address of a dynamic Web page. Dynamic URLs often contain thecharacters like: ?, &, %, , , , cgi-binhttp://mydomain.com/myres.php?fname AsimThere is a fourth optional part for dynamic URL. It contain the parameters sent to thedynamic page, in key value pair.?fname Asim&job Software%20EngineerURL EncodingURLs can only be sent over the Internet using the ASCII character-set.Since URLs often contain characters outside the ASCII set, the URL has to be convertedinto a valid ASCII format.URL encoding replaces unsafe ASCII characters with a "%" followed by twohexadecimal digits. URLs cannot contain spaces. URL encoding normally replaces aspace with a plus ( ) sign or with %20.03- HTTP BasicsHTTPHTTP stands for Hypertext Transfer Protocol. It’s an application level protocol, works as a requestresponse protocol between a client and server over web.HTTP is the foundation of data communication for the World Wide Web. Hypertext is structured text thatuses logical links (hyperlinks) between nodes containing text.HTTP RequestsTwo commonly used methods for a request-response between a client and server are:GET and POST GET - Requests data from a specified resource, has limited length and can cached byclient.POST - Submits data to be processed to a specified resource, has no data limit and nevercached.HTTPSHypertext Transfer Protocol Secure. Or HTTP over SSLIt’s a secure version of HTTP. All the communications between client and server are encryptedand authenticated.
04- Web Server, Services and AgentsWeb ServerA Web server is a program that uses HTTP (Hypertext Transfer Protocol) to serve the files thatform Web pages to users, in response to their requests, by HTTP clients. Dedicated computersand appliances may be referred to Web servers as well.Application ServerAn application server is a software framework that provides both facilities to create webapplications and a server environment to run them. It acts as a set of components accessible to thedeveloper through an API defined by the platform itself.Web ServicesWeb services are client and server applications that communicate over the World Wide Web(WWW) using HyperText Transfer Protocol (HTTP). Typically Web Service resides on a WebServer and use XML to communicate messages.
Web Agents / User AgentsThese are the Software applications that are used by users to communicate to a Web server toretrieve resources or receive data. Web Browser is a typical example of Web/User Agentapplication.05- Domain, Hosting, FTPDomainA domain name is a unique name for your web site. k.comIt is that part of the Uniform Resource Locator (URL) that tells a domain name server using thedomain name system (DNS), where to forward a request for a Web page. The domain name ismapped to an IP address (which represents a physical point on the Internet). See here some exampleof Domain Name. www.google.com.pkfacebook.comvalidate.ecp.govParts of Domain LD: Top Level Domainwww.google.com.pk
facebook.comvalidate.ecp.govSecond Level DomainMust be unique on the Internet and registered with one of the ICANN-accreditedregistrars for specific hird Level Domain – Sub DomainHostingAn Internet hosting service is a service that runs Internet servers, allowing organizations andindividuals to serve content on the Internet.FTPThe File Transfer Protocol (FTP) is a standard network protocol used to transfer computer files fromone host to another host over a TCP-based network, such as the Internet.FTP is simple and secureFile is split into small data packets. Client sends a packet to destination after opening an authenticatedconnection. FTP server check the packet, if data is correct, it send request for next packet, till the fileis completely received.FTP ClientFTP Client is typically software that allows us to communicate with a server to transfer files usingFTP protocol.HTML: Hyper Text Markup LanguageIntroductionHTML stands for Hyper Text Markup Language. It is the standard markup language used to create webpages. Along with CSS, and JavaScript, HTML is a cornerstone technology used to create web pages, aswell as to create user interfaces for mobile and web applications. Web browsers can read HTML files andrender them into visible or audible web pages.HTML BasicsHTML DocumentsAll HTML documents must start with a type declaration: !DOCTYPE html
See the following example: !DOCTYPE html html head /head body h1 Lorem p Dummy /body /html ipsum /h1 Text. /p The HTML document itself begins with html and ends with /html . The visible part of theHTML document is between body and /body .HTML HeadingsHTML headings are defined with the h1 to h6 tags.HTML ParagraphsHTML paragraphs are defined with the p tag: p My p AnotherParagraph. /p Paragraph. /p HTML ImagesHTML images are defined with the img tag. The source file (src), alternative text (alt), and size(width and height) are provided as attributes: img src “image.jpg" alt “Alternate text” width "104” height “142“ 08- Elements and AttributesHTML ElementsHTML elements are written with a start tag, with an end tag, with the content in between: tagname content /tagname The HTML element is everything from the start tag to the end tag: p Dummy Text /p Nested HTML ElementsHTML elements can be nested (elements can contain elements). All HTML documents consist ofnested HTML elements. This example contains 4 HTML elements:The html element defines the whole document. It has a start tag html and an end tag /html . The element content is another HTML element (the body element).
!DOCTYPE html html body h1 My Heading /h1 p My paragraph. /p /body /html The body element defines the document body. It has a start tag body and an end tag /body . The element content is two other HTML elements ( h1 and p ). body h1 Dummy Text /h1 p Lorem ipsum dolor /p /body The h1 element defines a heading. It has a start tag h1 and an end tag /h1 . Theelement content is: My Heading. h1 My Heading /h1 The p element defines a paragraph. It has a start tag p and an end tag /p . Theelement content is: My paragraph. p My paragraph. /p Don't Forget the End TagSome HTML elements will display correctly, even if you forget the end tag: html body p My /body /html Empty HTML Elementsparagraph
HTML elements with no content are called empty elements. br is an empty elementwithout a closing tag (the br tag defines a line break). Empty elements can be "closed"in the opening tag like this: br / .HTML5 does not require empty elements to be closed. But if you want stricter validation,or you need to make your document readable by XML parsers, you should close allHTML elements.Use Lowercase TagsHTML tags are not case sensitive: P means the same as p . The HTML5 standarddoes not require lowercase tags, but W3C recommends lowercase in HTML4, anddemands lowercase for stricter document types.HTML Attributes HTML elements can have attributesAttributes provide additional information about an elementAttributes are always specified in the start tagAttributes come in name/value pairs like: name "value"The lang AttributeThe document language can be declared in the html tag. The language is declared inthe lang attribute. Declaring a language is important for accessibility applications (screenreaders) and search engines: !DOCTYPE html html lang "en-US" body h1 My p MyHeading /h1 paragraph. /p /body /html The title AttributeHTML paragraphs are defined with the p tag. In this example, the p element has atitle attribute. The value of the attribute is “paragraph": p title "paragraph" W3Schools is a web developer's site. It provides tutorials and references coveringmany aspects of web programming,including HTML, CSS, JavaScript, XML, SQL, PHPetc. /p The href Attribute
HTML links are defined with the a tag. The link address is specified inthe href attribute:Example a href "http://www.google.com" This is a link /a Size AttributesHTML images are defined with the img tag.The filename of the source (src), and the size of the image (width and height) are allprovided as attributes:Example img src “google.jpg" width "104" height "142" The alt AttributeThe alt attribute specifies an alternative text to be used, when an HTML element cannotbe displayed. The value of the attribute can be read by "screen readers". This way,someone "listening" to the webpage, i.e. a blind person, can "hear" the element. img src “google.jpg“ alt “google” width "104“ height "142" Always Use Lowercase Attributes The HTML5 standard does not require lower case attribute names.W3C recommends lowercase in HTML4, and demands lowercase for stricterdocument types like XHTML.Always Quote Attribute ValuesThe HTML5 standard does not require quotes around attribute values. The href attribute,demonstrated above, can be written as: a href http://www.google.com Single or Double Quotes?Double style quotes are the most common in HTML, but single style can also be used. In somesituations, when the attribute value itself contains double quotes, it is necessary to use singlequotes: p title ‘Smith "ShotGun" Jack' 09- Heading and ParagraphHTML HeadingsHeadings are defined with the h1 to h6 tags. h1 defines the most important heading. h6 defines the least important heading.
Headings Are ImportantUse HTML headings for headings only. Don't use headings to make text BIG or bold. Searchengines use your headings to index the structure and content of your web pages. Users skim yourpages by its headings.It is important to use headings to show the document structure. In HTML, h1 headings should bemain headings, followed by h2 headings, then the less important h3, and so on.HTML Horizontal RulesThe hr tag creates a horizontal line in an HTML page. The hr element can be used to separatecontent. See the following example: p First hr p Second hr p Third paragraph. /p paragraph. /p paragraph. /p The HTML head ElementThe HTML head element has nothing to do with HTML headings. The HTML head elementcontains Meta data. Meta data are not displayed. The HTML head element is placed betweenthe html tag and the body tag: !DOCTYPE html html head title My HTML /title meta charset "UTF-8" /head body The HTML title ElementThe HTML title element is Meta data. It defines the HTML document's title. The title will notbe displayed in the document, but might be displayed in the browser tab. !DOCTYPE html html head title My HTML /title meta charset "UTF-8"
/head body The HTML meta ElementThe HTML meta element is also meta data. It can be used to define the character set, and otherinformation about the HTML document.HTML ParagraphsThe HTML p element defines a paragraph. See the examples below: p My p Second Paragraph /pParagraph /p HTML DisplayYou cannot be sure how HTML will be displayed. Large or small screens and resized windowswill create different results. With HTML, you cannot change the output by adding extra spaces orextra lines in your HTML code.The browser will remove extra spaces and extra lines when the page is displayed. Any number ofspaces, and any number of new lines, counts as only one space.HTML Line BreaksThe HTML br element defines a line break. Use br if you want a line break (a new line)without starting a new paragraph.10- HTML Styling and FormattingHTML StylingEvery HTML element has a default style (background color is white and text color is black).Changing the default style of an HTML element, can be done with the style attribute. Thisexample changes the default background color from white to light-grey: body style "background-color:lightgrey" h1 heading /h1 p paragraph. /p /body The HTML Style AttributeThe HTML style attribute has the following syntax:style "property:value"HTML Text ColorThe color property defines the text color to be used for an HTML element:
h1 style "color:blue" Thisis p style "color:red" This is a paragraph. /p aheading /h1 HTML FontsThe font-family property defines the font to be used for an HTML element. See the examplesbelow: h1 style "font-family:verdana" Thisis p style "font-family:courier" This is a paragraph. /p aheading /h1 HTML Text SizeThe font-size property defines the text size to be used for an HTML element: h1 style "font-size:300%" This is a heading /h1 p style "font-size:160%" This is a paragraph. /p HTML Text AlignmentThe text-align property defines the horizontal text alignment for an HTML element: h1style "text-align:center" Centered p This is a paragraph. /p Heading /h1 HTML Formatting Elements In the previous chapter, you learned about HTML styling, using the HTML style attribute.HTML also defines special elements, for defining text with a special meaning.HTML uses elements like b and i for formatting output, like bold or italic.Formatting elements were designed to display special types of text: Bold text Important text Italic text Emphasized text Marked text Small text Deleted text Inserted text Subscripts SuperscriptsHTML Bold and Strong FormattingThe HTML b element defines bold text, without any extra importance. p Thistext p b This text is bold /b . /p isHTML Italic and Emphasized FormattingThe HTML i element defines italic text, without any extra importance.normal. /p
p Thistext p i This text is italic /i . /p isnormal. /p HTML Italic and Emphasized FormattingThe HTML em element defines emphasized text, with added semantic importance. p This text is normal. /p p em This text is emphasized /em . /p HTML Small FormattingThe HTML small element defines small text: h2 HTML small Small /small Formatting /h2 HTML Marked FormattingThe HTML mark element defines marked or highlighted text: h2 HTML mark Marked /mark Formatting /h2 HTML Deleted FormattingThe HTML del element defines deleted (removed) of text. p My favorite color is del blue /del red. /p HTML Subscript FormattingThe HTML sub element defines subscripted text. p This is sub subscripted /sub text. /p HTML Superscript FormattingThe HTML sub element defines subscripted text. p This is sup superscripted /sup text. /p 11- HTML QuotationsHTML q for Short QuotationsThe HTML q element defines a short quotation. Browsers usually insert quotation marksaround the q element.HTML blockquote for Long QuotationsThe HTML blockquote element defines a quoted section. Browsers usually indent blockquote elements. p Here is a quote from WWF's website: /p blockquote cite "http://www.worldwildlife.org/who/index.html"
For 50 years, WWF has been protecting the future of nature. /blockquote HTML abbr for AbbreviationsThe HTML abbr element defines an abbreviation or an acronym. Marking abbreviations cangive useful information to browsers, translation systems and search-engines.HTML address for Contact InformationThe HTML address element defines contact information (author/owner) of a document orarticle. The element is usually displayed in italic. Most browsers will add a line break before andafter the element. address Written by Jon Doe. br Visit us at: br Example.com br Box 564, Disneyland br USA /address . /p HTML cite for Work TitleThe HTML cite element defines the title of a work. Browsers usually displays cite elementsin italic. p cite The Scream /cite by Edward Munch. Painted in 1893. /p HTML bdo for Bi-Directional OverrideThe HTML bdo element defines bi-directional override. If your browser supports bdo, the textwill be written from right to left. bdo dir "rtl" This text will be written from right to left /bdo 12- HTML Computer CodeHTML Computer Code FormattingNormally, HTML uses variable letter size, and variable letter spacing. This is not wanted whendisplaying examples of computer code. The kbd , samp , and code elements all supportfixed letter size and spacing.HTML Keyboard FormattingThe HTML kbd element defines keyboard input: p To open a file, select: /p
p kbd File Open. /kbd /p HTML Sample FormattingThe HTML samp element defines a computer output: samp demo.example.com login: Apr 12 09:10:17Linux 2.6.10grsec gg3 e fhs6b nfs gr0501 /samp HTML Code FormattingThe HTML code element defines programming code: code var person { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" } /code HTML Variable FormattingThe HTML var element defines a mathematical variable: p Einsteinwrote: /p p var E m c sup 2 /sup /var /p 13- HTML CommentsHTML Comment TagsYou can add comments to your HTML source by using the following syntax: !-- Write your comments here -- Comments in HTML are not displayed by the browser, but they can help document your HTML.With comments you can place notifications and reminders in your HTML. Try these examplesand see the differences: !--This p Thisisaiscommenta-- paragraph. /p !-- Remember to add more information here -- Comments are also great for debugging HTML, because you can comment out HTML lines ofcode, one at a time, to search for errors: !- img-- Doborder "0"notsrc "pic mountain.jpg"displayalt "Mountain"
Conditional CommentsYou might stumble upon conditional comments in HTML: !--[ifIE.someHTMLhere8] . ![endif]-- Software Program TagsHTML comments tags can also be generated by various HTML software programs.For example !--webbot bot-- tags wrapped inside HTML comments by FrontPage andExpression Web. As a rule, let these tags stay, to help support the software that created them.14- HTML LinksHTML Links-HyperlinksHTML links are hyperlinks. A hyperlink is a text or an image you can click on, and jump toanother document.HTML Links – SyntaxIn HTML, links are defined with the a tag:The href attribute specifies the destination address.The link text is the visible part.Clicking on the link text, will send you to the specified address. a href “http://google.com" This is a Link to Google /a Local LinksThe example above used an absolute URL (A full web address). A local link (link to the sameweb site) is specified with a relative URL (without http://www.) a href "html images.html" HTML Images /a HTML Links - Colors and IconsWhen you move the mouse cursor over a link, two things will normally happen: The mouse arrow will turn into a little handThe color of the link element will changeBy default, links will appear as this in all browsers: An unvisited link is underlined and blueA visited link is underlined and purpleAn active link is underlined and red
Try the following examples: style a:link {color:#000000; background-color:transparent; text-decoration:none}a:visited {color:#000000; background-color:transparent; text-decoration:none}a:hover {color:#ff0000; background-color:transparent; text-decoration:underline}a:active {color:#ff0000; background-color:transparent; text-decoration:underline} /style HTML Links - The target AttributeThe target attribute specifies where to open the linked document. Let see an example that willopen the linked document in a new browser window or in a new tab. a href “http://www.google.com/” target " blank“ Visit Google! /a HTML Links - Image as LinkIn HTML, it is common to use images as links. As in the following example: a href "default.html" img src "smiley.gif" alt "HTML tutorial" style "width:42px;height:42px;border:0" /a HTML Links - The id AttributeThe id attribute can be used to create bookmarks inside HTML documents. Bookmarks are notdisplayed in any special way. They are invisible to the reader. Add an id attribute to any a element: a id "tips" Useful Tips Section /a Then create a link to the a element (tips): a href "#tips" View Tips /a Create a link to the a element (tips) from another page: a href “page.htm#tips" Let See Tips /a 15- HTML ImagesHTML Images Syntax In HTML, images are defined with the img tag.The img tag is empty, it contains attributes only, and does not have a closing tag.The src attribute defines the url (web address) of the image:
img src "url” alt "some text" The alt Attribute The alt attribute specifies an alternate text for the image, if it cannot be displayed.The value of the alt attribute should describe the image in words.HTML Screen Readers Screen readers are software programs that can read what is displayed on a screen.Used on the web, screen readers can "reproduce" HTML as text-to-speech, sound icons, orbraille output.Screen readers are used by people who are blind, visually impaired, or learning disabled.Image Size - Width and Height You can use the style attribute to specify the width and height of an image.The values are specified in pixels (use px after the value) img src "html5.gif" alt "HTML5 Icon“ style "width:128px; height:128px" Width and Height or Style? Both, the width, the height, and the style attributes, are valid in the latest HTML5 standard.We suggest you use the style attribute. It prevents styles sheets from changing the default sizeof images html head style img { width:100%; } /style /head body img src "html5.gif" alt "HTML5 Icon" style "width:128px;height:128px" img src "html5.gif" alt "HTML5 Icon" width "128" height "128" /body /html Images in Another Folder If not specified, the browser expects to find the image in the same folder as the web page.However, it is common on the web, to store images in a sub-folder, and refer to the folderin the image name:
Note: If a browser cannot find an image, it will display a broken link icon:Images on Another Server Some web sites store their images on image servers.Actually, you can access images from any web address in the world: img src "http://www.google.com/images/srpr/logo11w.png" Using an Image as a LinkIt is common to use images as links: a href “url” img src “logo.png" alt “logo" /a Image MapsFor an image, you can create an image map, with clickable areas.Image FloatingYou can let an image float to the left or right of a paragraph. p img src "smiley.gif" alt "Smiley face" style "float:left;width:42px;height:42px" Aparagraphwithanimage. /p 16a- HTML TablesYou can also create a table in an html document:NumberFirst NameLast llSmith50Defining HTML Tables Tables are defined with the table tag.Tables are divided into table rows with the tr tag.Table rows are divided into table data with the td tag.
Row can also be divided into table headings with the th tag. table style "width:100%" tr td Jill /td td Smith /td td 50 /td /tr tr td Eve /td td Jackson /td td 94 /td /tr /table An HTML Table with a Border Attribute If you do not specify a border for the table, it will be displayed without borders.A border can be added using the border attribute. table border "1" style "width:100%" tr td Jill /td td Smith /td td 50 /td /tr tr td Eve /td td Jackson /td td 94 /td /tr /table An HTML Table with Collapsed BordersIf you want the borders to collapse into one border, add CSS border-collapsetable, th, td {border: 1px solid black;border-collapse: collapse;}th,td {padding: 15px;}
HTML Table Headings Table headings are defined with the th tag.By default, all major browsers display table headings as bold and centered: table style "width:100%" tr th Firstname /th th Lastname /th th Points /th /tr tr td Eve /td td Jackson /td td 94 /td /tr /table An HTML Table with Border Spacing Border spacing specifies the space between the cells.To set the border spacing for a table, use the CSS border-spacing property:table {border-spacing: 5px;}16b- HTML Tables HandlingTable Cells that Span Many ColumnsTo make a cell span more than one column, use the colspan attribute table style "width:100%" tr th Name /th th colspan "2" Telephone /th /tr tr td Bill Gates /td td 555 77 854 /td td 555 77 855 /td /tr /table
Table Cells that Span Many RowsTo make a cell span more than one row, use the rowspan attribute table style "width:100%" tr th Name: /th td Bill /tr tr th rowspan "2" Telephone: /th td 555 /tr tr td 555 /tr /table Gates /td 77854 /td 77855 /td An HTML Table with a CaptionTo add a caption to a table, use the caption tag: table style "width:100%" caption Monthly tr th Month /th th Savings /th /tr tr td January /td td 100 /td /tr tr td February /td td 50 /td /tr /table savings /caption Different Styles for Different Tables Most of the examples we show use a style attribute (width "100%") to define the widthof each table.This makes it easy to define different widths for different tables.The styles in the head section, however, define a style for all tables in a page.To define a special style for a special table, add an id attribute to the table table id "t01" tr th Firstname /th th Lastname /th th Points /th /tr tr td Eve /td
td Jackson /td td 94 /td /tr /table A different style for this table:table#t01 {width: 100%;background-color: #f1f1c1;}Try more stylestable#t01background-color: #eee;}table#t01background-color: #fff;}table#t01color: white;background-color: black;}tr:nth-child(even) {tr:nth-child(odd) {17- HTML ListUnordered HTML Lists An unordered list starts with the ul tag. Each list item starts with the li tag.The list items will be marked with bullets (small black circles). ul li Coffee /li li Tea /li li Milk /li /ul Unordered HTML Lists - The Style AttributeA style attribute can be added to an unordered list, to define the style of the marker:StyleDescriptionlist-style-type:discThe list items will be marked with bullets (default)list-style-type:circleThe list items will be marked with circlesth {
list-style-type:squareThe list items will be marked with squareslist-style-type:noneThe list items will not be markedDisc: ul style "list-style-type:disc" li Coffee /li li Tea /li li Milk /li /ul Circle: ul style "list-style-type:circle" li Coffee /li li Tea /li li Milk /li /ul Square: ul style "list-style-type:square" li Coffee /li li Tea /li li Milk /li /ul None: ul style "list-style-type:none" li Coffee /li li Tea /li li Milk /li /ul Ordered HTML ListsAn ordered list starts with the ol tag. Each list item starts with the li tag. The list items willbe marked with numbers. ol li Coffee /li li Tea /li li Milk /li /ol Numbers:
ol type "1" li Coffee /li li Tea /li li Milk /li /ol Upper Case: ol type "A" li Coffee /li li Tea /li li Milk /li /ol Lower Case: ol type "a" li Coffee /li li Tea /li li Milk /li /ol Roman Upper Case: ol type "I" li Coffee /li li Tea /li li Milk /li /ol Roman Lower Case: ol type "i" li Coffee /li li Tea /li li Milk /li /ol HTML Description Lists A description list, is a list of terms, with a description of each term.The dl tag defines a description list.The dt tag defines the term (name), and the dd tag defines the data (description).Horizontal ListsHTML lists can be styled in many different ways with CSS. One popular way, is to style a list todisplay horizontally: !DOCTYPE html html head
style ul#menu li {display:inline;} /style /head body h2 Horizontal List /h2 ul id "menu" li HTML /li li CSS /li li JavaScript /li li PHP /li /ul /body /html 18- HTML BlocksHTML Block Elements and Inline ElementsMost HTML elements are defined as block level elements or inline elements. Block levelelements normally start (and end) with a new line, when displayed in a browser.Examples: h1 , p , ul , table Inline elements are normally displayed without line breaks.Examples: b , td , a , img The HTML div ElementThe HTML div element is a block level element that can be used as a container for otherHTML elements. The div element has no special meaning. It has no required attributes, butstyle and class are common.Because it is a block level element, the browser will display line breaks before and after it. Whenused together with CSS, the div element can be used to style blocks of content.
The HTML span ElementThe HTML span element is an inline element that can be used as a container for text. The span element has no special meaning. It has no required attributes, but style and class arecommon.Unlike div , which is formatted with line breaks, the span element does not have anyautomatic formatt
Front End Development Front end web development is NOT design. The front end developer stands between the designer on one end and the back end developer on the other. As a Front end developer you have to: Make sure the content is presented as desire. All user interactions are handled. 02- URL: Uniform Resource Locator
