Markou moment
							
								
								
									
										20
									
								
								Semester 3/Assignments/mavenproject1/nb-configuration.xml
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,20 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<project-shared-configuration>
 | 
			
		||||
    <!--
 | 
			
		||||
This file contains additional configuration written by modules in the NetBeans IDE.
 | 
			
		||||
The configuration is intended to be shared among all the users of project and
 | 
			
		||||
therefore it is assumed to be part of version control checkout.
 | 
			
		||||
Without this configuration present, some functionality in the IDE may be limited or fail altogether.
 | 
			
		||||
-->
 | 
			
		||||
    <properties xmlns="http://www.netbeans.org/ns/maven-properties-data/1">
 | 
			
		||||
        <!--
 | 
			
		||||
Properties that influence various parts of the IDE, especially code formatting and the like. 
 | 
			
		||||
You can copy and paste the single properties, into the pom.xml file and the IDE will pick them up.
 | 
			
		||||
That way multiple projects can share the same settings (useful for formatting rules for example).
 | 
			
		||||
Any value defined here will override the pom.xml file value but is only applicable to the current project.
 | 
			
		||||
-->
 | 
			
		||||
        <org-netbeans-modules-maven-j2ee.netbeans_2e_hint_2e_j2eeVersion>10-web</org-netbeans-modules-maven-j2ee.netbeans_2e_hint_2e_j2eeVersion>
 | 
			
		||||
        <org-netbeans-modules-maven-j2ee.netbeans_2e_hint_2e_deploy_2e_server>gfv700ee10</org-netbeans-modules-maven-j2ee.netbeans_2e_hint_2e_deploy_2e_server>
 | 
			
		||||
        <org-netbeans-modules-projectapi.jsf_2e_language>Facelets</org-netbeans-modules-projectapi.jsf_2e_language>
 | 
			
		||||
    </properties>
 | 
			
		||||
</project-shared-configuration>
 | 
			
		||||
							
								
								
									
										48
									
								
								Semester 3/Assignments/mavenproject1/pom.xml
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,48 @@
 | 
			
		||||
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 | 
			
		||||
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 | 
			
		||||
    <modelVersion>4.0.0</modelVersion>
 | 
			
		||||
    <groupId>edu.slcc.asdv.caleb</groupId>
 | 
			
		||||
    <artifactId>mavenproject1</artifactId>
 | 
			
		||||
    <version>1.0-SNAPSHOT</version>
 | 
			
		||||
    <packaging>war</packaging>
 | 
			
		||||
    <name>mavenproject1-1.0-SNAPSHOT</name>
 | 
			
		||||
    
 | 
			
		||||
    <properties>
 | 
			
		||||
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 | 
			
		||||
        <jakartaee>10.0.0</jakartaee>
 | 
			
		||||
    </properties>
 | 
			
		||||
    
 | 
			
		||||
    <dependencies>
 | 
			
		||||
        <dependency>
 | 
			
		||||
            <groupId>jakarta.platform</groupId>
 | 
			
		||||
            <artifactId>jakarta.jakartaee-api</artifactId>
 | 
			
		||||
            <version>${jakartaee}</version>
 | 
			
		||||
            <scope>provided</scope>
 | 
			
		||||
        </dependency>
 | 
			
		||||
        <dependency>
 | 
			
		||||
            <groupId>org.primefaces</groupId>
 | 
			
		||||
            <artifactId>primefaces</artifactId>
 | 
			
		||||
            <version>13.0.5</version>
 | 
			
		||||
            <classifier>jakarta</classifier>
 | 
			
		||||
        </dependency>
 | 
			
		||||
    </dependencies>
 | 
			
		||||
    
 | 
			
		||||
    <build>
 | 
			
		||||
        <plugins>
 | 
			
		||||
            <plugin>
 | 
			
		||||
                <groupId>org.apache.maven.plugins</groupId>
 | 
			
		||||
                <artifactId>maven-compiler-plugin</artifactId>
 | 
			
		||||
                <version>3.8.1</version>
 | 
			
		||||
                <configuration>
 | 
			
		||||
                    <source>11</source>
 | 
			
		||||
                    <target>11</target>
 | 
			
		||||
                </configuration>
 | 
			
		||||
            </plugin>
 | 
			
		||||
            <plugin>
 | 
			
		||||
                <groupId>org.apache.maven.plugins</groupId>
 | 
			
		||||
                <artifactId>maven-war-plugin</artifactId>
 | 
			
		||||
                <version>3.3.2</version>
 | 
			
		||||
            </plugin>
 | 
			
		||||
        </plugins>
 | 
			
		||||
    </build>
 | 
			
		||||
</project>
 | 
			
		||||
@@ -0,0 +1,45 @@
 | 
			
		||||
/*
 | 
			
		||||
 * Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
 | 
			
		||||
 * Click nbfs://nbhost/SystemFileSystem/Templates/Classes/Class.java to edit this template
 | 
			
		||||
 */
 | 
			
		||||
package car;
 | 
			
		||||
 | 
			
		||||
import java.io.Serializable;
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 *
 | 
			
		||||
 * @author caleb
 | 
			
		||||
 */
 | 
			
		||||
class Car implements Serializable {
 | 
			
		||||
 | 
			
		||||
    private String name;
 | 
			
		||||
    private int year;
 | 
			
		||||
 | 
			
		||||
    public Car(String name, int year)
 | 
			
		||||
    {
 | 
			
		||||
        this.name = name;
 | 
			
		||||
        this.year = year;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public int getYear()
 | 
			
		||||
    {
 | 
			
		||||
        return year;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public void setYear(int year)
 | 
			
		||||
    {
 | 
			
		||||
        this.year = year;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    public String getName()
 | 
			
		||||
    {
 | 
			
		||||
        return name;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public void setName(String name)
 | 
			
		||||
    {
 | 
			
		||||
        this.name = name;
 | 
			
		||||
    }
 | 
			
		||||
    
 | 
			
		||||
}
 | 
			
		||||
@@ -0,0 +1,141 @@
 | 
			
		||||
/*
 | 
			
		||||
 * Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
 | 
			
		||||
 * Click nbfs://nbhost/SystemFileSystem/Templates/Classes/Class.java to edit this template
 | 
			
		||||
 */
 | 
			
		||||
package car;
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 *
 | 
			
		||||
 * @author caleb
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
import jakarta.faces.application.FacesMessage;
 | 
			
		||||
import jakarta.faces.context.FacesContext;
 | 
			
		||||
import jakarta.faces.view.ViewScoped;
 | 
			
		||||
import jakarta.inject.Named;
 | 
			
		||||
import java.io.Serializable;
 | 
			
		||||
import java.util.ArrayList;
 | 
			
		||||
import java.util.HashMap;
 | 
			
		||||
import java.util.List;
 | 
			
		||||
import java.util.Map;
 | 
			
		||||
import java.util.Set;
 | 
			
		||||
import org.primefaces.event.SelectEvent;
 | 
			
		||||
 | 
			
		||||
@Named(value = "carAutoCompleteBean")
 | 
			
		||||
@ViewScoped
 | 
			
		||||
public class CarAutoCompleteBean implements Serializable
 | 
			
		||||
{
 | 
			
		||||
    private Car selectedCar;
 | 
			
		||||
    private static Map<String, Car> cars = new HashMap<String, Car>();
 | 
			
		||||
 | 
			
		||||
    String simpleText;
 | 
			
		||||
    List<String> multipleSelects;
 | 
			
		||||
    
 | 
			
		||||
    public CarAutoCompleteBean()
 | 
			
		||||
    {
 | 
			
		||||
        cars.put("BMW", new Car("BMW", 2024));
 | 
			
		||||
        cars.put("CC", new Car("CC", 2018));
 | 
			
		||||
        cars.put("Golf", new Car("Golf", 1998));
 | 
			
		||||
        cars.put("Jetta", new Car("Jetta", 2012));
 | 
			
		||||
        cars.put("Passat", new Car("Passat", 2016));
 | 
			
		||||
 | 
			
		||||
        cars.put("Polo", new Car("Polo", 1978));
 | 
			
		||||
       cars.put("Scirocco", new Car("Scirocco", 1981));
 | 
			
		||||
       cars.put("Touareg", new Car("Touareg", 2019));
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public List<String> getMultipleSelects()
 | 
			
		||||
    {
 | 
			
		||||
        return multipleSelects;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public void setMultipleSelects(List<String> multipleSelects)
 | 
			
		||||
    {
 | 
			
		||||
        this.multipleSelects = multipleSelects;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public static Map<String, Car> getCars()
 | 
			
		||||
    {
 | 
			
		||||
        return cars;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public Car getSelectedCar()
 | 
			
		||||
    {
 | 
			
		||||
        System.out.println(selectedCar);
 | 
			
		||||
        return selectedCar;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public void setSelectedCar(Car selectedCar)
 | 
			
		||||
    {
 | 
			
		||||
        this.selectedCar = selectedCar;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public List<Car> completeCar(String input)
 | 
			
		||||
    {
 | 
			
		||||
        List<Car> suggestions = new ArrayList<Car>();
 | 
			
		||||
        Set<String> keys = cars.keySet();
 | 
			
		||||
        for (String key : keys)
 | 
			
		||||
        {
 | 
			
		||||
            if (key.startsWith(input))
 | 
			
		||||
            {
 | 
			
		||||
                suggestions.add(cars.get(key));
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
        return suggestions;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public List<Car> completeCarContains(String input)
 | 
			
		||||
    {
 | 
			
		||||
        List<Car> suggestions = new ArrayList<Car>();
 | 
			
		||||
        Set<String> keys = cars.keySet();
 | 
			
		||||
        for (String key : keys)
 | 
			
		||||
        {
 | 
			
		||||
            String s = key.toLowerCase();
 | 
			
		||||
            if (s.contains(input.toLowerCase()))
 | 
			
		||||
            {
 | 
			
		||||
                suggestions.add(cars.get(key));
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
        return suggestions;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public String getSimpleText()
 | 
			
		||||
    {
 | 
			
		||||
        return simpleText;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public void setSimpleText(String simpleText)
 | 
			
		||||
    {
 | 
			
		||||
        this.simpleText = simpleText;
 | 
			
		||||
    }
 | 
			
		||||
    public List<String> completeSimple(String input)
 | 
			
		||||
    {
 | 
			
		||||
        List<String> suggestions = new ArrayList<String>();
 | 
			
		||||
        
 | 
			
		||||
        for (char c ='A'; c < 'Z'; ++c)
 | 
			
		||||
        {
 | 
			
		||||
           suggestions.add( Character.toString(c));
 | 
			
		||||
        }
 | 
			
		||||
        return suggestions;
 | 
			
		||||
    }
 | 
			
		||||
    public void handleSelect(SelectEvent event)
 | 
			
		||||
    {
 | 
			
		||||
       System.out.println("handleSelect:" + event );
 | 
			
		||||
        Object selectedObject = event.getObject();
 | 
			
		||||
        FacesMessage msg = new FacesMessage("Selected", "Item:" + selectedObject);
 | 
			
		||||
        FacesContext.getCurrentInstance().addMessage(null, msg);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    public void handleSelectSimple(SelectEvent event)
 | 
			
		||||
    {
 | 
			
		||||
        System.out.println("handleSelect:" + event );
 | 
			
		||||
        Object selectedObject = event.getObject();
 | 
			
		||||
        FacesMessage msg = new FacesMessage("Selected", "Item:" + selectedObject);
 | 
			
		||||
        FacesContext.getCurrentInstance().addMessage(null, msg);
 | 
			
		||||
    }
 | 
			
		||||
 
 | 
			
		||||
 | 
			
		||||
   
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@@ -0,0 +1,13 @@
 | 
			
		||||
package edu.slcc.asdv.caleb.mavenproject1;
 | 
			
		||||
 | 
			
		||||
import jakarta.ws.rs.ApplicationPath;
 | 
			
		||||
import jakarta.ws.rs.core.Application;
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * Configures Jakarta RESTful Web Services for the application.
 | 
			
		||||
 * @author Juneau
 | 
			
		||||
 */
 | 
			
		||||
@ApplicationPath("resources")
 | 
			
		||||
public class JakartaRestConfiguration extends Application {
 | 
			
		||||
    
 | 
			
		||||
}
 | 
			
		||||
@@ -0,0 +1,20 @@
 | 
			
		||||
package edu.slcc.asdv.caleb.mavenproject1.resources;
 | 
			
		||||
 | 
			
		||||
import jakarta.ws.rs.GET;
 | 
			
		||||
import jakarta.ws.rs.Path;
 | 
			
		||||
import jakarta.ws.rs.core.Response;
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 *
 | 
			
		||||
 * @author 
 | 
			
		||||
 */
 | 
			
		||||
@Path("jakartaee10")
 | 
			
		||||
public class JakartaEE10Resource {
 | 
			
		||||
    
 | 
			
		||||
    @GET
 | 
			
		||||
    public Response ping(){
 | 
			
		||||
        return Response
 | 
			
		||||
                .ok("ping Jakarta EE")
 | 
			
		||||
                .build();
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
@@ -0,0 +1,7 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<persistence version="3.0" xmlns="https://jakarta.ee/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://jakarta.ee/xml/ns/persistence https://jakarta.ee/xml/ns/persistence/persistence_3_0.xsd">
 | 
			
		||||
    <!-- Define Persistence Unit -->
 | 
			
		||||
    <persistence-unit name="my_persistence_unit">
 | 
			
		||||
        
 | 
			
		||||
    </persistence-unit>
 | 
			
		||||
</persistence>
 | 
			
		||||
@@ -0,0 +1,6 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<beans xmlns="https://jakarta.ee/xml/ns/jakartaee"
 | 
			
		||||
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 | 
			
		||||
       xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/beans_4_0.xsd"
 | 
			
		||||
       bean-discovery-mode="all">
 | 
			
		||||
</beans>
 | 
			
		||||
@@ -0,0 +1,25 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<!--
 | 
			
		||||
    Copyright (c) 1997, 2018 Oracle and/or its affiliates. All rights reserved.
 | 
			
		||||
    
 | 
			
		||||
    This program and the accompanying materials are made available under the
 | 
			
		||||
    terms of the Eclipse Public License v. 2.0, which is available at
 | 
			
		||||
    http://www.eclipse.org/legal/epl-2.0.
 | 
			
		||||
 | 
			
		||||
    This Source Code may also be made available under the following Secondary
 | 
			
		||||
    Licenses when the conditions for such availability set forth in the
 | 
			
		||||
    Eclipse Public License v. 2.0 are satisfied: GNU General Public License,
 | 
			
		||||
    version 2 with the GNU Classpath Exception, which is available at
 | 
			
		||||
    https://www.gnu.org/software/classpath/license.html.
 | 
			
		||||
 | 
			
		||||
    SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 | 
			
		||||
-->
 | 
			
		||||
<!DOCTYPE glassfish-web-app PUBLIC "-//GlassFish.org//DTD GlassFish Application Server 3.1 Servlet 3.0//EN" "http://glassfish.org/dtds/glassfish-web-app_3_0-1.dtd">
 | 
			
		||||
<glassfish-web-app error-url="">
 | 
			
		||||
  <class-loader delegate="true"/>
 | 
			
		||||
  <jsp-config>
 | 
			
		||||
    <property name="keepgenerated" value="true">
 | 
			
		||||
      <description>Keep a copy of the generated servlet class' java code.</description>
 | 
			
		||||
    </property>
 | 
			
		||||
  </jsp-config>
 | 
			
		||||
</glassfish-web-app>
 | 
			
		||||
@@ -0,0 +1,24 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<web-app version="6.0" xmlns="https://jakarta.ee/xml/ns/jakartaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd">
 | 
			
		||||
    <context-param>
 | 
			
		||||
        <param-name>jakarta.faces.PROJECT_STAGE</param-name>
 | 
			
		||||
        <param-value>Development</param-value>
 | 
			
		||||
    </context-param>
 | 
			
		||||
    <servlet>
 | 
			
		||||
        <servlet-name>Faces Servlet</servlet-name>
 | 
			
		||||
        <servlet-class>jakarta.faces.webapp.FacesServlet</servlet-class>
 | 
			
		||||
        <load-on-startup>1</load-on-startup>
 | 
			
		||||
    </servlet>
 | 
			
		||||
    <servlet-mapping>
 | 
			
		||||
        <servlet-name>Faces Servlet</servlet-name>
 | 
			
		||||
        <url-pattern>/faces/*</url-pattern>
 | 
			
		||||
    </servlet-mapping>
 | 
			
		||||
    <session-config>
 | 
			
		||||
        <session-timeout>
 | 
			
		||||
            30
 | 
			
		||||
        </session-timeout>
 | 
			
		||||
    </session-config>
 | 
			
		||||
    <welcome-file-list>
 | 
			
		||||
        <welcome-file>faces/index.xhtml</welcome-file>
 | 
			
		||||
    </welcome-file-list>
 | 
			
		||||
</web-app>
 | 
			
		||||
@@ -0,0 +1,64 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 | 
			
		||||
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 | 
			
		||||
<html xmlns="http://www.w3.org/1999/xhtml"
 | 
			
		||||
      xmlns:f="http://java.sun.com/jsf/core" 
 | 
			
		||||
      xmlns:h="http://java.sun.com/jsf/html"
 | 
			
		||||
      xmlns:p="http://primefaces.org/ui"
 | 
			
		||||
      xmlns:f5="http://xmlns.jcp.org/jsf/passthrough"
 | 
			
		||||
      >
 | 
			
		||||
 | 
			
		||||
    <h:head>
 | 
			
		||||
        <title>#{msgs.title}</title>
 | 
			
		||||
    </h:head>
 | 
			
		||||
    <h:body>
 | 
			
		||||
        <h:form>
 | 
			
		||||
            <p:growl id="growl" showDetail="true" showSummary="true"  life="8000"
 | 
			
		||||
                     redisplay="false"
 | 
			
		||||
                     />
 | 
			
		||||
            <h:panelGrid columns="3" >
 | 
			
		||||
                <p:autoComplete id="carPOJO"
 | 
			
		||||
                                value="#{carAutoCompleteBean.selectedCar}"
 | 
			
		||||
                                completeMethod="#{carAutoCompleteBean.completeCarContains}"
 | 
			
		||||
                                itemLabel="#{car.name}" 
 | 
			
		||||
                                var="car" 
 | 
			
		||||
                                itemValue="#{car}"
 | 
			
		||||
                                forceSelection="true"
 | 
			
		||||
                                converter="#{carConverter}"
 | 
			
		||||
                                f5:placeholder="select a car"
 | 
			
		||||
                                size="50"
 | 
			
		||||
                                >
 | 
			
		||||
                    <p:ajax event="itemSelect"
 | 
			
		||||
                            listener="#{carAutoCompleteBean.handleSelect}"
 | 
			
		||||
                            update="growl" />                        
 | 
			
		||||
                    <p:column>
 | 
			
		||||
                        <h:graphicImage library="images" name="#{car.name}.png"/>
 | 
			
		||||
                    </p:column>
 | 
			
		||||
                    <p:column>#{car.name}</p:column>
 | 
			
		||||
 | 
			
		||||
                </p:autoComplete> 
 | 
			
		||||
 | 
			
		||||
                <p:autoComplete id="id_letter" value="#{carAutoCompleteBean.simpleText}"
 | 
			
		||||
                                
 | 
			
		||||
                                completeMethod="#{carAutoCompleteBean.completeSimple}"
 | 
			
		||||
                                forceSelection="true"
 | 
			
		||||
                                f5:placeholder="select a letter"
 | 
			
		||||
                                >
 | 
			
		||||
                  
 | 
			
		||||
                </p:autoComplete>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
                <p:autoComplete id="id_multipleSelect"
 | 
			
		||||
                                value="#{multi.selectedTexts}"
 | 
			
		||||
                                completeMethod="#{multi.complete}"
 | 
			
		||||
                                f5:placeholder="select multiple"
 | 
			
		||||
                                multiple="true" >
 | 
			
		||||
                                <p:ajax event="itemSelect" 
 | 
			
		||||
                        listener="#{multi.handleSelect}" update="growl id_multipleSelect" />
 | 
			
		||||
                </p:autoComplete>
 | 
			
		||||
 | 
			
		||||
            </h:panelGrid>
 | 
			
		||||
        </h:form>
 | 
			
		||||
    </h:body>
 | 
			
		||||
</html>
 | 
			
		||||
@@ -0,0 +1,10 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html>
 | 
			
		||||
    <head>
 | 
			
		||||
        <title>Start Page</title>
 | 
			
		||||
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 | 
			
		||||
    </head>
 | 
			
		||||
    <body>
 | 
			
		||||
        <h1>Hello World!</h1>
 | 
			
		||||
    </body>
 | 
			
		||||
</html>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 30 KiB  | 
| 
		 After Width: | Height: | Size: 68 KiB  | 
| 
		 After Width: | Height: | Size: 68 KiB  | 
| 
		 After Width: | Height: | Size: 64 KiB  | 
| 
		 After Width: | Height: | Size: 70 KiB  | 
| 
		 After Width: | Height: | Size: 65 KiB  | 
| 
		 After Width: | Height: | Size: 54 KiB  | 
| 
		 After Width: | Height: | Size: 68 KiB  |