Html And Css

Content 

Html Introduction



Html Tags – IMG, Form, Hyperlinks, Frames, Tables



Exercise



Cascading Style Sheets – Introduction



Advantages of CSS



Types of Style Sheets



Selectors



Key Concepts



Example

Introduction [Contd…] 

Web Browser ➨ Establishes the connection to the specified Web server, at the requested URL (Uniform Resource Locator (URL) ➨ Interprets and formats the information found on the server, and displays the formatted information.



Web Server ➨ A computer that delivers/serves Web pages. ➨ Every Web server has an IP address and possibly a domain name. E.g:I f you enter the URL http://www.yahoo.com/index.html in your browser, this sends a request to the server whose domain name is yahoo.com. The server then fetches the page named index.html and sends it to your browser. ➨ Each Web server contains documents that are written in the Hypertext Markup Language (HTML) Requests and responses are exchanged between Web browsers and Webservers using the Hypertext Transfer Protocol (HTTP)

Introduction [Contd…] 

Hypertext Transfer Protocol (HTTP) stateless, application level protocol.

HTTP defines how the browser establishes connection to the server the browser requests information from the server the server responds to the browser’s request the server/browser closes the connection

Works on Client-Server architecture

Introduction [Contd…] 

Hypertext Markup Language(HTML) ➨



a simple markup language used to define and describe the layout of a web page

Uniform Resource Locator(URL) ➨

standard identifier used to locate information on the Web

➨

elements in a URL – protocol://domain name/filename ➨

hypertext protocol – http://www.microsoft.com/index.html

➨

file transfer protocol – ftp://ftp.dartmouth.org

URL Basics 

A uniform resource locator, commonly abbreviated as URL specifies the location of the resource on the internet/intranet or a web application.



URL types:



➨

Absolute URLs

➨

Relative URLs

➨

Fragment URLs

Absolute URLs Absolute URLs use a complete Internet address to give the location of a resource. ➨ Examples: ➨

http://msdn.microsoft.com/support/index.asp http://msdn.microsoft.com/code/welcome.asp?frame=true

URL Basics 

Relative URLs Relative URLs are used for accessing files when the full Internet address is unnecessary. ➨ Examples: ➨

index.asp /index.asp welcome.asp?frame=true



Fragment URLs Fragment URLs are used to access to a specific location within a URL. ➨ Examples: ➨

http://www.someplace.com/shopping.html#books

Introduction - HTML Tags 

HTML Tags are enclosed in angle brackets,



Attributes are commands added to the tags to specify various options.



Any HTML file should start with the tag and end with the tag



The text between the start and end tags is the element content ➨



HTML tags are not case sensitive, means the same as

HTML file is saved with the extension htm or html ➨

That is filename.htm or filename.html

Introduction - HTML Tags [Contd…] Simple HTML for example, <TITLE>My First HTML Page This is my first HTML Assignment. I should do it correctly.

Introduction - HTML Tags [Contd…] Tag with attributes <TITLE>My First HTML Page This HTML page is designed to explain the attributes of the body tag.

bgcolor and text are the attributes of the body tag.

bgcolor="#cccccc" indicates the background color of the html page.
text="#660000" indicates the color of the text.

Using Hyperlinks and Anchors 



Uses of Hyperlinks: ➨

Connecting to other HTML pages that are part of a web site or to related material from other Web sites.

➨

Connecting to non-HTML resources, including portable documents such as Adobe Acrobat PDF files or video clips such as QuickTime movies.

Structure of Hyperlinks: ➨

URL description where, http://www.linkfinder.com/ is an URL and is the anchor tag.

➨

Code: Download Adobe Acrobat Reader Output: Download Adobe Acrobat Reader

Adding Images to a Web Page 

tag is used to include an image in the web document.



Example Code: Output:

Creating HTML tables 

Table is a system of columns and rows.



Using tables you can control precisely how you want your content divided up and where you want it placed.



To create a HTML use a

tag and its attributes.



Each row of a table is specified using a tag.



Each cell of a table is specified using a

tag.  Table heading is specified using a

tag. Tables [Contd…] Eg. Year Amount 2002 85,000 2001 65,000  Year Amount 2002 85,000 2001 65,000 Specifying rowspan and colspan Specifying Colspan Heading Heading One Two One Two Specifying Rowspan One Two Three One Two Three Frames [Contd…]     Any link in one frame can open a page in another frame. Accomplish this by using the name attribute of the tag and the target attribute of the tag. The name attribute gives each frame an identity as whatever name you choose. Refer the frame name in the target attribute of the tag frame.html toolbar.html home products about us feedback Frames [Contd…]  toolbar.html and index.html Using Forms in HTML [Contd…]  Introduction ➨  HTML Forms act as an Interface between the End User and the server side Application. At client side the form is filled and data is passed on to the server, where the data is interpreted and used accordingly. Different Elements ➨ Form ➨ Input ➨ Select and Option ➨ Textarea ➨ Others [Button, Label, Fieldset and Legend] Using Forms in HTML [Contd…]  Form Element ➨ The form has got two main attributes viz.. Action and Method. ➨ Action attribute is required. Methods are ‘get’ which is default and ‘post’ ➨ Other attributes define the encoding type and event handlers[javascript/vbscript] ➨ Here is an eg. of Form tag The action attribute has the url to which the Form data has to go Using Forms in HTML [Contd…] ➨ The GET method submits the name/value pairs to the URL specified in action attribute appending to the URL. eg urlname?FirstName=value&SecondName=value ➨ This can be seen on the browser’s address bar ➨ The method POST submits the data as part of HTML Body ➨ The ENCTYPE is used to state the encoding type of the form contents. Default being ‘application/x-www-form-urlencoded’. ➨ There are two attributes[onSubmit and onReset] which are used w.r.t scripting is concerned. The ONSUBMIT event is triggered when a submit button is clicked and from here the control can be passed on to any function of a script ➨ eg. javascript or vbscript Usage: ---- ➨ Using Forms in HTML [Contd…] ➨ ➨  Basically this can be used whenever we want to invoke a javascript/vbscript function on clicking on a ‘Submit’ button Whenever we use any form element in a web page it must be with in tags. Input Elements ➨ button – Used to invoke a script function or to play around the controls of form elements ➨ checkbox - Off/on ➨ file - Used for selecting user-selecting file ➨ hidden – to hold hidden form elements which do not appear on the web page ➨ image – to make an image as equivalent to a Submit button ➨ password – to Mask the input entry ➨ radio – one entry choosing ➨ Reset – reset the form elements’ values Using Forms in HTML [Contd…]   Hidden ➨ The hidden value enables to submit form information that’s invisible to the user on the web page. ➨ Eg. Image ➨ This is same as a ‘Submit’ button, but the only difference is that it replaces the stark Submit button with an Image. Otherwise it has the same function. ➨ Eg. Using Forms in HTML [Contd…]  Password ➨ This is an input control where the text is masked with an asterisk. Otherwise its similar to a text box. ➨ Eg. Using Forms in HTML [Contd…]  Submit ➨ This is used to send the name/value pairs of the active form elements to the URL ➨ Specified in the FORM declaration HTML specification enables multiple Submit buttons ➨ Its declared as ➨  Text This can be used to enter text of a single-line in a text box ➨ Eg. maxlength=”20”> ➨ The ‘size’ attribute sets the length of the text box ➨ The ‘maxlength’ attribute limits[No. of characters] the user for typing text ➨ One more attribute is ’readonly’. This locks the cursor on focus of the text box and does not allow the user to type any text Using Forms in HTML [Contd…]  Select and Option Elements ➨ The SELECT element is used to create a list of choices either as a drop-down menu or a list box. Each of the choices in the list is an OPTION element <SELECT name=”controlName” size=”controlWidth” onChange=script> First Option Second Option Third Option ➨ onChange is an event for Select box and directs the flow control to the specified script function. ➨ The default value if not specified explicitly for an option tag would be its content. ➨ The attribute selected leaves that option highlighted Using Forms in HTML [Contd…]  Text Area Element ➨ The textarea element is similar to the INPUT element’s text type. But in this case the user can type a larger section of text than they can with the text boxes ➨ It’s a multiple line text input. ➨<br /> <br /> The dimensions of the textarea window is specified by the attributes ‘rows’ and ‘cols’<br /> <br /> Using Forms in HTML [Contd…] <br /> <br /> Exercise<br /> <br /> Create a simple HTML ‘Registration Form’ web page having following field names, Choose the appropriate form element for each field. 1 UserID 2 Password 3 RetypePassword 4 First Name 5 Last Name 6 Country – List of some countries 7 City – List of some states of that country 8 Your interests ---------Entertainment,Business, Shopping,Health,Music,Travel, Others Please specify 9 Are you a fresher? 10 Write a note on your experiences at MindTree so far 11 Upload your Photo 12 Email ID Provide all necessary buttons to suite this form. The submit button is an image.<br /> <br /> CSS <br /> <br /> What are style sheets? ➨<br /> <br /> Style sheets provide a means for authors to specify how they wish documents written in a markup language such as XML or HTML to be formatted.<br /> <br /> CSS [Contd…] Why Style Sheets <br /> <br /> There are two answers to this: ➨<br /> <br /> ➨<br /> <br /> HTML isn't designed for styling documents - when you write an HTML document, you are specifying only the content that the element contains. . If you wished to state that you want your headings to be yellow Helvetica, then you could have <H1><FONT color="yellow" face="Helvetica">A heading</FONT></H1>, but this is bad for several reasons: ➨<br /> <br /> You have to add that piece of code to each heading that you want styled - this is time-consuming, prone to error and makes files excessively bloated (a typical page styled using HTML will be 1/3rd formatting tags).<br /> <br /> ➨<br /> <br /> If you want to change those headings to pink Arial, then you will have to change each heading individually - a prohibitively laborious task on a large site.<br /> <br /> HTML simply doesn't offer sufficient control over document formatting important formatting effects such as leading (the space between lines), text shadows, and many other effects just can't be done using HTML.<br /> <br /> CSS [Contd…] <br /> <br /> Why Style Sheets? ➨<br /> <br /> Style Sheets helps in cost reduction, but also the download speed will increase for viewers of your pages<br /> <br /> CSS [Contd…] <br /> <br /> What reasons are there not to use Style Sheet? ➨<br /> <br /> <br /> <br /> Not all the browsers support the Style Sheet properly.<br /> <br /> Advantages of using Style Sheets ➨<br /> <br /> Style sheets have the following advantages: ➨ They separate content from formatting. ➨<br /> <br /> Easy maintainance<br /> <br /> ➨<br /> <br /> They reduce download time by removing formatting information from documents<br /> <br /> ➨<br /> <br /> They give far more control over formatting than HTML - such features as background images and colors on all elements - not just the whole document, etc.<br /> <br /> ➨<br /> <br /> They ensure a consistent appearance across a site<br /> <br /> CSS [Contd…] <br /> <br /> Types Of Style Sheets ➨<br /> <br /> Inline Style<br /> <br /> ➨<br /> <br /> Embedded Style Sheet<br /> <br /> Linked Style Sheets ➨ Importing Style Sheets ➨<br /> <br /> <br /> <br /> Inline Style For example see the following snippet <P style=“color: green”> Paragraph inline style </P> Inside the style attribute comes style declarations. In this example, the P element is being made green. <BODY style=“color: #FFFFFF; background:#000000”> Paragraph inline style </BODY> In the above snippet we are applying the Inline style to the Body tag, which will give the Black back ground to the body and White color for all the text which will appear in the Body tag.<br /> <br /> CSS [Contd…] <br /> <br /> Embedded Style Sheet Embedded style sheets are enclosed in a <STYLE type="text/css"> and </STYLE> tag. They go in the header of a page: For example see the following snippet:<br /> <br /> <HTML> <HEAD> <STYLE type="text/css"> <!-BODY {color: red} --> </STYLE> </HEAD> <BODY> The main Content will appear in the Body section </BODY> </HTML><br /> <br /> CSS [Contd…] <br /> <br /> They have two benefits ➨<br /> <br /> They do not affect all the rest of the style sheets that you might use<br /> <br /> ➨<br /> <br /> If a document is saved and read offline, the style will be maintained<br /> <br /> CSS [Contd…] <br /> <br /> Linked Style Sheet ➨<br /> <br /> Style sheets are linked using the <LINK rel="stylesheet" type="text/css" href="name.css"> tag, which must go in the header of a page.<br /> <br /> ➨<br /> <br /> rel="stylesheet" this says that it is a forward link, and tells the browser what to expect at the other end, namely a style sheet.<br /> <br /> ➨<br /> <br /> The type attribute, the type of style sheet (always text/css)<br /> <br /> ➨<br /> <br /> The href attribute, the location of the style sheet.<br /> <br /> CSS [Contd…] See the following snippet for Linked Style Sheet <HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="fluorescent.css"> </HEAD> <BODY> The Main content will appear here in the Body Section </BODY> <HTML> <br /> <br /> Once you have linked the style sheet to your page, you then have to create the style sheet. For example: BODY {color: black; font-family: Geneva, Helvetica, Arial, sans-serif; background-color: white}<br /> <br /> <br /> <br /> If you saved the example above as a style sheet, then every page that links to it will have the specified styles.<br /> <br /> CSS [Contd…] <br /> <br /> <br /> <br /> Advantage of linked Style Sheets ➨<br /> <br /> As one style sheet can be attached to hundreds of files, maintenance of web pages becomes much easier.<br /> <br /> ➨<br /> <br /> Helps to achieve the consistency in the styles through out the pages.<br /> <br /> Disadvantage ➨<br /> <br /> If the user downloads the page and if he forgot to download the Linked CSS then he/she will not be able to view the page with all the styles.<br /> <br /> CSS [Contd…] Importing Style Sheets <br /> <br /> The @import rule thus allows you to keep some things the same while having others different<br /> <br /> <br /> <br /> syntax: @import url(nameoffile.css)<br /> <br /> <br /> <br /> It must come at the start of the style sheet, before any rulesets (a ruleset is something like P {color: red})<br /> <br /> <br /> <br /> Alternatively it can be specified as @import "nameoffile.css";, as @import url("nameoffile.css"); or as @import 'nameoffile.css';.<br /> <br /> <br /> <br /> However, Internet Explorer only supports the url() formats, not the " and ' formats.<br /> <br /> CSS [Contd…] <br /> <br /> Selectors To give you more freedom to select which elements your style is applied to.<br /> <br /> <br /> <br /> Element’s Type Selectors: For style declaration see the following snippet. H1 { color: red } H1, H2, H3 { color: red }<br /> <br /> CSS [Contd…] <br /> <br /> Attribute Selectors: ➨ ➨<br /> <br /> Class ID The CLASS attribute enables you to apply declarations to a group of elements that have the same value on the CLASS attribute ➨ All elements inside BODY can have a CLASS attribute ➨<br /> <br /> boldtxt { font-weight: bold } <br /> <br /> See the following snippet for actual implementation of Class attribute<br /> <br /> CSS [Contd…] <HTML> <TITLE>Class Attributes</TITLE> <STYLE TYPE="text/css"> .boldtxt { font-weight: bold } .nrmltxt { font-weight: normal } </STYLE> <BODY> <P CLASS= boldtxt >This is Bold Text Line</P> <P CLASS= nrmltxt >This is normal text line</P> <P CLASS= boldtxt >Second Line of Bold Text</P> <P CLASS= nrmltxt >Second Line of Normal Text</P> </BODY> </HTML><br /> <br /> CSS [Contd…] <br /> <br /> ID Attribute: The ID attribute works like the CLASS attribute with one important difference – ➨<br /> <br /> The value of an ID attribute must be unique throughout the document.<br /> <br /> ➨<br /> <br /> A selector that includes an ID attribute is called an IDselector<br /> <br /> ➨<br /> <br /> The syntax is: #undltxt { text-decoration: underline }<br /> <br /> ➨<br /> <br /> The HTML syntax of the element on which you want to use the ID attribute resembles that of other elements with attributes; for example: <P ID=undltxt>Underlined text</P><br /> <br /> CSS [Contd…] <br /> <br /> Style Attribute: ➨<br /> <br /> The STYLE attribute is actually a replacement for the whole selector mechanism<br /> <br /> ➨<br /> <br /> Instead of having a value that can be referred to in a selector (which is what ID and CLASS have), the value of the STYLE attribute is actually one or more CSS declarations.<br /> <br /> ➨<br /> <br /> <P STYLE="text-decoration: underline">Underlined text</P><br /> <br /> ➨<br /> <br /> Actual Implementation of Style Attribute<br /> <br /> <HTML> <TITLE>Class Attributes</TITLE> <BODY> <P STYLE="font-weight: bold">This is Bold Text Line</P> <P STYLE="font-weight: normal">This is normal text line</P> </BODY> </HTML><br /> <br /> CSS [Contd…] <br /> <br /> Anchor Pseudo Classes ➨<br /> <br /> Currently only one element type in HTML uses pseudo-classes: the A (anchor) element<br /> <br /> ➨<br /> <br /> An anchor pseudo-class is a mechanism by which a browser indicates to a user the status of hyperlinks in a document the user is viewing.<br /> <br /> A:link { color: red }<br /> <br /> /* unvisited link */<br /> <br /> A:visited { color: blue }<br /> <br /> /* visited link */<br /> <br /> A:active { color: lime }<br /> <br /> /* active link */<br /> <br /> CSS [Contd…] <br /> <br /> KEY Concepts ➨<br /> <br /> Inheritance if you specify BODY {color: black} then everything inside BODY will inherit that color unless a contrary declaration is made.<br /> <br /> ➨<br /> <br /> Case Sensitive All CSS is case insensitive<br /> <br /> ➨<br /> <br /> Test your style sheet on more than one browser.<br /> <br /> ➨<br /> <br /> Modularity of CSS enables faster page loading<br /> <br /> CSS [Contd…] <br /> <br /> Example – Embedded Style Sheet<br /> <br /> CSS [Contd…] Here is the source file for the above program.<br /> <br /> CSS [Contd…] <br /> <br /> Example – Linked Style Sheet<br /> <br /> CSS [Contd…] Here is the source file for the above program.<br /> <br /> CSS [Contd…] <br /> <br /> Below is the LinkedSS.css file<br /> <br /> CSS [Contd…] <br /> <br /> Reference Links for CSS ➨<br /> <br /> http://www.w3.org<br /> <br /> ➨<br /> <br /> http://www.htmlhelp.com<br /> <br /> ➨<br /> <br /> http://www.webreview.com<br /> <br /> ➨<br /> <br /> http://www.wdvl.com/Authoring/Style/Sheets/ </div> </div> <hr /> <h4>Related Documents</h4> <div class="row"> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/html-and-css-68o2mpj6kzp9" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/68o2mpj6kzp9.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/html-and-css-68o2mpj6kzp9" class="text-dark">Html And Css</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> November 2019</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 13</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/html-xhtml-css-4vz0n8rlm38l" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/4vz0n8rlm38l.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/html-xhtml-css-4vz0n8rlm38l" class="text-dark">Html-xhtml-css</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> November 2019</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 9</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/pdf-memento-html-css-4d378xkpnpzx" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/4d378xkpnpzx.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/pdf-memento-html-css-4d378xkpnpzx" class="text-dark">Pdf Memento Html Css</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> June 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 5</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/manual-de-html-css-p5on6w4xeg3e" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/p5on6w4xeg3e.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/manual-de-html-css-p5on6w4xeg3e" class="text-dark">Manual De Html Css</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> May 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 13</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/html-dan-css-6v3r70g1wnze" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/6v3r70g1wnze.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/html-dan-css-6v3r70g1wnze" class="text-dark">Html Dan Css</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> May 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 9</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/execise-html-css-4vz07rrm4xo8" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/4vz07rrm4xo8.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/execise-html-css-4vz07rrm4xo8" class="text-dark">Execise Html/css</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> April 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 4</small> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div> </div> </div> <footer class="footer pt-5 pb-0 pb-md-5 bg-primary text-white"> <div class="container"> <div class="row"> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Our Company</h5> <ul class="list-unstyled"> <li><i class="fas fa-location-arrow"></i> 3486 Boone Street, Corpus Christi, TX 78476</li> <li><i class="fas fa-phone"></i> +1361-285-4971</li> <li><i class="fas fa-envelope"></i> <a href="mailto:info@pdfcoke.com" class="text-white">info@pdfcoke.com</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Quick Links</h5> <ul class="list-unstyled"> <li><a href="https://pdfcoke.com/about" class="text-white">About</a></li> <li><a href="https://pdfcoke.com/contact" class="text-white">Contact</a></li> <li><a href="https://pdfcoke.com/help" class="text-white">Help / FAQ</a></li> <li><a href="https://pdfcoke.com/account" class="text-white">Account</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Legal</h5> <ul class="list-unstyled"> <li><a href="https://pdfcoke.com/tos" class="text-white">Terms of Service</a></li> <li><a href="https://pdfcoke.com/privacy-policy" class="text-white">Privacy Policy</a></li> <li><a href="https://pdfcoke.com/cookie-policy" class="text-white">Cookie Policy</a></li> <li><a href="https://pdfcoke.com/disclaimer" class="text-white">Disclaimer</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Follow Us</h5> <ul class="list-unstyled list-inline list-social"> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-facebook-f"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-twitter"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-linkedin"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-instagram"></i></a></li> </ul> <h5 class="text-white font-weight-bold mb-4">Mobile Apps</h5> <ul class="list-unstyled "> <li><a href="#" class="bb-alert" data-msg="IOS app is not available yet! Please try again later!"><img src="https://pdfcoke.com/static/images/app-store-badge.svg" height="45" /></a></li> <li><a href="#" class="bb-alert" data-msg="ANDROID app is not available yet! Please try again later!"><img style="margin-left: -10px;" src="https://pdfcoke.com/static/images/google-play-badge.png" height="60" /></a></li> </ul> </div> </div> </div> </footer> <div class="footer-copyright border-top pt-4 pb-2 bg-primary text-white"> <div class="container"> <p>Copyright © 2024 PDFCOKE.</p> </div> </div> <script src="https://pdfcoke.com/static/javascripts/jquery.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/popper.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/bootstrap.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/bootbox.all.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/filepond.js"></script> <script src="https://pdfcoke.com/static/javascripts/main.js?v=1726735699"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-144986120-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-144986120-1'); </script> </body> </html>