A Pen by Kelly

Developer
Kelly
Size
7,267 Kb
Views
24,288
  1. A Pen by Kelly Previews
  2. A Pen by Kelly HTML Codes
  3. A Pen by Kelly CSS Codes

How do I make an a pen by kelly?

What is a a pen by kelly? How do you make a a pen by kelly? This script and codes were developed by Kelly on 30 August 2022, Tuesday.

A Pen by Kelly Previews
IQ Test

A Pen by Kelly - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Kelly</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Kelly's Website</title>
</head>
<body> <div class="header"> <h1>Kelly's Website</h1> <a href="#position1">The Web and HTML, Basically</a> | <a href="#position2">Front End Web Development</a> | <a href="#position3">CSS Has Style </a> | <a href="#position4">Python, Basically</a> | <a href="#position5">Useful Links</a> </div> <a id="position1"></a> <div class="lesson"> <h2>The Web and HTML, Basically</h2> <div class="bigidea"> <h3> How Does The Web Work?</h3> <div Class="explaination"> The World Wide Web consists of several key elements: <blockquote>1. Your Computer and Browser <br>2. The Internet <br>3. Servers, or computers built for hosting files <br>4. HTTP, or Hyper Text Transfer Protocol <br>5. HTML, or Hyper Text Markup Language </blockquote> Whenever you sit down at your computer and type something into the address bar of your browser, several things start to happen. The first part of a web address -- HTTP -- sends a request to a server for information. Hopefully, that server sends information through the internet in the form of HTML back to your computer. Finally, your browser translates the HTML into something that is visually friendly for you to use. </div> </div> <div class="bigidea"> <h3> How Does HTML Work?</h3> <div Class="explaination"> HTML, like the web, also consists of several different parts. <blockquote>1. Text content -- what you see. <br>2. Markup -- what it looks like. <br>3. References to other documents -- images and video . <br>4. Links to other pages.</blockquote> While text content makes up a large part of every webpage, markup is working behind the scenes to make your viewing experience more sophisticated than a large wall of text. Markup consists mostly of <em>tags</em> which alter the content in and around use the &lt;b&gt; tag. Something written in HTML like this: <blockquote>Old, gold, and &lt;b&gt;bold&lt;/b&gt;</blockquote> ...will be displayed like this: <blockquote>Old, gold, and <b>bold</b> </blockquote> Furthermore, elements can be <em>nested</em> inside of one another. So if we added an &lt;em&gt; tag to the previous example... <blockquote>&lt;em&gt;Old, gold and &lt;b&gt;bold&lt;/b&gt;&lt;/em&gt;</blockquote> We would get this result: <blockquote><em>Old, gold, and <b>bold</b></em> </blockquote> The word 'bold' is techinically located inside two different tags. Therefore, it takes on the characteristics of both of those tags (it is bold and italicized). </div> </div> <div class="bigidea"> <h3>Types Of Tags</h3> <div Class="explaination"> HTML tags can vary greatly in how they function and what they look like. Many tags contain <em>attributes</em>, which give that tag additional information on how it will work within the context of the document. One common example is the &lt;a&gt; tag, which stands for 'anchor' and can <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">link it's contents to other websites</a>. One important distition between tags would be <em>inline</em> versus <em>block</em> elements. While an inline tag will work within a wrtten line, a block tag will create a box around its content. What this boils down to is that inline tags will not start a new line, while block tags do. Here is a list of common tags and the categories they belong to: <blockquote> <table> <tr> <th>&nbsp;Inline Elements&nbsp;</th> <th>&nbsp;Block Elements&nbsp;</th> </tr> <tr> <td> &lt;br&gt; Break</td> <td> &lt;p&gt; Paragraph</td> </tr> <tr> <td> &lt;a&gt; Anchor </td> <td> &lt;div&gt; Document Division &nbsp;</td> </tr> <tr> <td>&lt;span&gt; Inline Element Grouping &nbsp;</td> <td>&lt;form&gt; Input Form</td> </tr> <tr> <td>&lt;img&gt; Image</td> <td>&lt;table&gt; Table</td> </tr> <tr> <td>&lt;strong&gt; Important Text&nbsp;</td> <td>&lt;header&gt; Page Header</td> </table> </blockquote> </div> </div> </div> <a id="position2"></a> <div class="lesson"> <h2>Front End Web Development</h2> <div class="bigidea"> <h3>The Big Three</h3> <div Class="explaination"> The web conists of three main programming languages, each with their own distinct role. Those languages are: <blockquote>HTML - Provides the structure of every webpage. <br>CSS - Provides Styling for elements on a given webpage <br>Javascript - Provides more advanced ways to interact with a given webpage </blockquote> </div> <div class="picture"><img src="http://wakeupandcode.com/wp-content/uploads/2013/02/html5_css_javascript.png" alt="HTML, Java, and CSS" height="240" Width="650"> </div> </div> <div class="bigidea"> <h3>Document Object Model</h3> <div Class="explaination"> <p>The Document Object Model, or <em>DOM</em>, is a convention -- an industry-wide agreement-- for how an internet browser interprets a webpage's code. In order to understand the importance of the DOM, we have to keep in mind the role of the web browser: keeping the internet a user friendly place. Without web browsers, whenever we got information from a server, we might be faced with a wall of HTML instead of a neatly aranged interface.</p> <p>In order to achieve its goal, the browser uses the DOM to create a tree-like structure from the code. In one of the previous sections, <em>How does HTML Work</em>, we learned how tags can nest inside one another. The DOM takes certain tags, for example a &lt;div&gt; tag, and will turn them into branches of the DOM Tree. For example, if the DOM gets this code:</p> <blockquote>&lt;div class="body"&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="subject1"&gt; <br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="subject2"&gt;</blockquote> <p>the DOM would create two branches for the div elements 'subject1' and 'subject2' from the existing 'body' branch.</p> <p>Think of how files and folders are organized on your computer. Folders can exist within one another, or next to each other in the same location. The DOM works in a very similar way.</p> <p>Here is a great visualization of the Tree Structure, and how HTML Elements may be parsed:</p> <br><img src="http://www.webstepbook.com/supplements/slides/images/dom_tree.gif" alt="DOM Tree Example" height="240" width="650"> <p>After all of this parsing, it may look extremely similar to the original HTML document. Keep in mind that there may be small, subtle differences made by the browser in order to properly display the page. But regardless of any changes, we now have a structure that is easily navigable. We can now, using the 'Developer Tools' on our browser, find any element in the DOM by clicking on the webpage display, or on the tree structure itself. Another handy use of the DOM is collapsing and expanding branches so that we can focus on certain parts of the DOM and ignore other parts</p> </div> </div> <div class="bigidea"> <h3>Boxes Everywhere</h3> <div Class="explaination"> Each element displayed on a webpage is in the shape of a rectangle. Even if you were to display a picture of a circle, like this: <blockquote><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/2000px-Circle_-_black_simple.svg.png" alt="plain circle" height="50" width="50"> </blockquote> it will be contained within an element, like this: <blockquote><img src="https://qph.is.quoracdn.net/main-qimg-c8066f512264122ed2d87ad769822330?convert_to_webp=true" alt="circle in square" height="50" width="50"> </blockquote> Furthermore, rectangular elements can contain other elements inside of them. </div> </div> </div> <a id="position3"></a> <div class="lesson"> <h2>CSS Has Style</h2> <div class="bigidea"> <h3>What is CSS</h3> <div Class="explaination"> CSS, which stands for Cascading Style Sheets, is a programing language meant to provide style and aestheic changes to HTML documents. While HTML is capabable of doing this by itself &lpar;by using the &lt;style&gt; tag&rpar;, CSS speeds up the process by using far less code. CSS has a feature called inheritence, which is what the <em>cascading</em> part of CSS stands for. If you were to write code in CSS that affects an HTML element, that same code will generally affect elements nested inside of the first element. For Example, if you had this element: <blockquote>&lt;div class="Bowie"&gt;Is there life on &lt;em&gt;Mars&lt;/em&gt;?&lt;/div&gt;</blockquote> ...and applied CSS... <blockquote>.Bowie { color: orange;}</blockquote> It would turn out like this ... <blockquote> <div class="Bowie"> Is there life on <em>Mars</em>?</div> </blockquote> Because the &lt;em&gt; tag is embedded in the &lt;div&gt; tag, it is also affected by the CSS styling. </div> </div> <div class="bigidea"> <h3>The Role of Selectors.</h3> <div class="explaination"> In the last example, we used what is called a <em>Class Selector</em> to make changes to all elements defined under the class 'Bowie'. While Class Selectors are perhaps the most popular, there are many different selectors we can use while coding in CSS as well. Here's a list of other helpful tags: <blockquote> <table> <tr> <th>&nbsp;Type&nbsp;</th> <th>&nbsp;Example&nbsp;</th> <th>&nbsp;Uses&nbsp;</th> </tr> <tr> <td>Class Selector</td> <td>.Bowie {...</td> <td>applies to classes, assigned to various &lt;div&gt; tags</td> </tr> <tr> <td>ID Selector</td> <td>#Bowie {...</td> <td>applies to a single element given an ID. Overides other selectors</td> </tr> <tr> <td>Tag Selector</td> <td>&lt;p&gt;</td> <td>applies to all of a single element type, such as &lt;a&gt; or &lt;p&gt;</td> </tr> <tr> <td>Attribute Selector</td> <td>[alt="Bowie]</td> <td>applies to attributes, inside of elements, like href or src</td> </tr> </table> <!-- Information on Selectors found here: https://css-tricks.com/how-css-selectors-work/ --> </blockquote> </div> </div> <div class="bigidea"> <h3>What's In The box?</h3> <div Class="explaination">We already know that elements are shaped like boxes, and that elements can be nested inside of one another.To complicate things a bit, each element consists of four different boxes, which serve different functions in the layout of a webpage. <blockquote><b>Body</b> - is the innermost box and is the meat of the element. <br><b>Padding</b> - defines the space between the body the outside of the element. <br><b>Border</b> - is the outermost portion of the element. <br><b>Margin</b> - defines the space between the element and other elements. </blockquote> <img src="http://www.w3.org/TR/REC-CSS2/images/boxdim.gif" alt="Body, Padding, Border, Margin"> </div> </div> </div> <a id="position4"></a> <div class="lesson"> <h2>Python, Basically</h2> <div class="bigidea"> <h3>Variables</h3> <div Class="explaination"><p>Moving past languages like CSS and HTML, languages begin to become a little more abstract. Our first abstract concept to grasp is the <em>variable</em>. Simply put, a variable is a place holder for other values. Even if you're not writing very complex code in Python, variables are immediately useful in terms of code <em>readability</em>. For example, if we had an equation like this: <blockquote> 3,806,000 / 323,055, 000</blockquote> We would assign the numbers in this equation their own variables, so that anyone reading our code can easily see what, exactly, we are calculating <blockquote> squaremilesinus = 3806000 <br> peopleinus = 323055000 <br> milesperpersoninus = squaremilesinus / peopleinus </blockquote> Furthmore, we can use a small, easy to remember variable to hold the place of a long or arbitrary number. </p> </div> </div> <div class="bigidea"> <h3>'=' Doesn't Equal 'Equal'</h3> <div Class="explaination"> In order to give a variable a value in Python, we use the '=' symbol. For example, if we wanted the variable 'cat' to have a value of 5, we would do it like so: <blockquote>cat = 5</blockquote> In arithmetic, the '=' is used to signify that everything on each side of it is equal in value. This is not true for languages like Python. In Python, whenever we are introducing a new variable, or reassigning an existing variable, we put it on the <em>left</em> side of the '=' symbol. On the right side of the '=', we put the value we are assigning to the variable. Take this code: <blockquote> x = 5 <br>x = x-1</blockquote> That second line would be an impossible equation if we were to encounter it in algebra class. In Python, it means the existing value of 'x', which is 5, is being reassigned to a value of 4. </div> </div> <div class="bigidea"> <h3>Strings</h3> <div Class="explaination"> A variable can be assigned more than just a numerical value, we can also it a <em>string</em>. Strings a a series or grouping of characters. We use "" or '' to denote a string. <blockquote> bowie = 'Ground control to Major Tom'</blockquote> Numbers can also be a part of strings, which can cause some confusion. Consider the two equations: <blockquote> 2 + 2 <br>'2' + '2' </blockquote> The result of the prior will be 4, because we add the value of 2 and 2 together. However, the result of the latter will be 22, Because we put the characters '2' and '2' together. </div> </div> </div> <a id="position5"></a> <div class="lesson"> <h2>Useful Links</h2> <div class="bigidea"> <blockquote> <a href="https://www.udacity.com"><span class="link">Udacity</span></a> - A website providing Nanodegree Programs, along with a bunch of other shorter courses <br><a href="http://www.w3schools.com/"><span class="link">W3Schools</span></a> - A Website where you can find indepth information on HTML, CSS, Java and other languages <br><a href="http://codepen.io/"><span class="link">Codepen</span></a> - An in-browser sandbox for HTML, CSS, and Java <br><a href="http://stackoverflow.com/"><span class="link">Stack Overflow</span></a> - A place where you can get all our programming questions answered by your peers <br><a href="http://www.sublimetext.com/"><span class="link">Sublime Text</span></a> - A free, easy to use Text Editor <br><a href="https://validator.w3.org/#validate_by_upload"><span class="link">HTML Validator</span></a> - A service by WC3 to check your HTML code against industry standards <br><a href="https://jigsaw.w3.org/css-validator/#validate_by_upload"><span class="link">CSS Validator</span></a> - A service by WC3 to check your CSS code against industry standards <br><a href="http://www.cleancss.com/html-beautify/"><span class="link">HTML Formatter</span></a> - Clean up your HTML! <br><a href="http://html.fwpolice.com/css/"><span class="link">CSS Beautifier</span></a> - Let your CSS shine! <br><a href="https://www.wikipedia.org/"><span class="link">Wikipedia</span></a> - For all of life's other quetions </blockquote> </div> </div> <p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /> </a> </p>
</body>
</body>
</html>

A Pen by Kelly - Script Codes CSS Codes

body { background-color: #6aa5e7; color: #d3e8fe; font-family: Tahoma, sans-serif;
}
.header { position: fixed; border: inset; border-width: 10px; border-color: #d3e8fe; background-color: #0f4684; padding-top: 0px; text-align: center; font-family: sans-serif; font-size: 15px; height: 100px; width: 100%; top: 0px; left: 0px;
}
h1 { font-size: 30px;
}
h2 { background-color: #0f4684; width: 30%;
}
h3 { font-weight: bold;
}
.lesson { padding-top: 105px;
}
.bigidea { background-color: #d3e8fe; color: #040a10; border: outset; border-color: #0f4684; border-width: 5px; padding-left: 5px;
}
.explaination { padding-left: 10px; padding-right: 10px;
}
a:visited { color: #2d7acf;
}
table, th, td { border: solid; border-collapse: collapse;
}
.link { font-size: 20px;
}
.Bowie { color: orange;
}
A Pen by Kelly - Script Codes
A Pen by Kelly - Script Codes
Home Page Home
Developer Kelly
Username Kellyjohnbraun
Uploaded August 30, 2022
Rating 3
Size 7,267 Kb
Views 24,288
Do you need developer help for A Pen by Kelly?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kelly (Kellyjohnbraun) Script Codes
Name
The Web and HTML, Basically
Basic Tic Tac Toe
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!