Establishing your Web Presence [Maanas Shah] [060341010]
Objectives
How the WWW works The HTML language The use of CSS (Style Sheets) JavaScript programming Server Scripting Technologies
How the WWW works?
What is the WWW? How does it work? What is a browser? What is a server?
WWW - The World Wide Web
The WWW is a network of computers all over the world. The WWW is most often called the Web. The computers on the Web communicate using standard protocols and languages. The W3C (The World Wide Web Consortium) are making the rules and standards for the Web.
The HTML language
What is an HTML file? Example of HTML Example explained
Hyper Text Markup Language
An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an .htm or .html file extension An HTML file can be created using a simple text editor
HTML - Example
Title of page This is my first homepage. This text is bold
Example Explained
The first tag in your HTML document is . This tag tells your browser that this is the start of an HTML document. The last tag in your document is which is the end of the HTML document. The text between the tag and the tag is header information. Header information is not displayed in the browser window.
Example Explained
The text between the tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font, <i> </i> make italics and <u> </u> underlines the text.<br />
<br />
The use of CSS (Style Sheets) <br />
<br />
Common Problem Save lot of work Multiple Styles<br />
<br />
Cascading Style Sheets <br />
<br />
Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4 to solve a problem External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Internal and external style sheets will Cascade into one<br />
<br />
Solve Common Problem <br />
<br />
<br />
<br />
HTML tags were originally designed to define the content of a document. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags like <div>. When major browsers added tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the presentation layout.<br />
<br />
Save a lot of work <br />
<br />
CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web pages are updated automatically.<br />
<br />
Multiple Styles <br />
<br />
Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.<br />
<br />
Cascading Order <br />
<br />
Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority: <br />
<br />
Browser default External style sheet Internal style sheet (inside the <head> tag) Inline style (inside an HTML element)<br />
<br />
JavaScript Programming <br />
<br />
What is JavaScript?<br />
<br />
What is JavaScript? <br />
<br />
<br />
<br />
JavaScript is about “programming” the behavior of the browser. This is called clientside scripting or browser scripting. JavaScript was designed to add interactivity to HTML pages A JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation)<br />
<br />
Server Scripting Technologies <br />
<br />
What is PHP?<br />
<br />
What is PHP? <br />
<br />
<br />
<br />
<br />
<br />
Server-side scripting is about “programming” the behavior of the server. This is called server-side scripting or server scripting. PHP stands for PHP: Hypertext Preprocessor PHP scripts are executed on the server and resultant HTML page sent back top browser<br />
<br />
Advantages of ServerScripting <br />
<br />
<br />
<br />
Provides security since your code can not be viewed from the browser Because the scripts are executed on the server, the browser that displays the file does not need to support scripting at all!<br />
<br />
Thank you </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/establishing-your-web-presence-gl3g5jg2yzpr" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/gl3g5jg2yzpr.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/establishing-your-web-presence-gl3g5jg2yzpr" class="text-dark">Establishing Your Web Presence</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> October 2019</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 34</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/fire-of-your-presence-09o88ep0enor" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/09o88ep0enor.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/fire-of-your-presence-09o88ep0enor" class="text-dark">Fire Of Your Presence</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> 12</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/presence-1wovpr1xr7ol" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/1wovpr1xr7ol.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/presence-1wovpr1xr7ol" class="text-dark">Presence</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> 26</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/presence-48oj4e5n5lo1" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/48oj4e5n5lo1.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/presence-48oj4e5n5lo1" class="text-dark">Presence</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> 42</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/presence-kpolp470g3xn" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/kpolp470g3xn.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/presence-kpolp470g3xn" class="text-dark">Presence</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> October 2019</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 40</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/here-in-your-presence-fiyh-4vz07rnnwvo8" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/4vz07rnnwvo8.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/here-in-your-presence-fiyh-4vz07rnnwvo8" class="text-dark">Here In Your Presence (fiyh)</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> 10</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=1732664813"></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>